@extends('layouts.master')

@section('pagetitle')
My Profile
@endsection
@section('title')
My Profile
@endsection

@section('content')

@php
    use App\Models\MerchantSite;
    $merchant_sites = MerchantSite::where('merchant_id', @auth('web')->user()->id)->first();
@endphp

<div class="row">
    <div class="col-lg-4 col-xlg-3 col-md-5">
        <div class="card">
            <div class="card-body">
                @include('layouts.alert')
                <h3 class="m-t-0"> {{ $merchants->name }}</h3>

                <!-- <div style="margin-top: -40px; margin-left: 200px;">
                    <a href="{{ url('merchant-site/view') }}" class="btn btn-warning btn-flat ">
                    <i class="icon-pencil" aria-hidden="true"> View</i></a>
                    </div> -->

                <div class="text-right" style="margin-top: -40px;">
                    <a href="{{ url('merchant-site/edit') }}" class="btn btn-warning btn-flat ">
                        <i class="icon-pencil" aria-hidden="true"> Edit</i></a>
                </div>
                <hr>

                <div class="user-bg">
                    @if( $merchants->image)
                    <img width="100%" src="{{ env('UPLOAD_URL').'/'.$merchants->image }}" alt="">
                    @else
                    <img width="100%" src="{{ url('images/dummy-logo.png') }}">
                    @endif
                    <!-- <img width="100%" src="{{ env('UPLOAD_URL').'/'.$merchants->image }}"> -->
                </div>
                
                <div class="user-btm-box">
                    <!-- .row -->
                    <div class="row m-t-10">
                        <div class="col-md-6 b-r"><strong style="font-weight: bold;">Business Name</strong>
                            <p>{{ $merchants->name }} </p>
                        </div>

                        <div class="col-md-6 b-r"><strong style="font-weight: bold;"> Business Type</strong>
                        
                            <p>{{ ucfirst($merchants->business_type) }}</p>
                        </div>

                        @if($merchant_sites->business_type == 'grocery')
                        <div class="col-md-6 b-r"><strong style="font-weight: bold;"> Site Type</strong>
                            <p>{{ ucfirst($merchants->site_type) }}</p>
                        </div>
                        @endif

                        <div class="col-md-6 b-r"><strong style="font-weight: bold;"> Country</strong>
                            <p>{{ $merchants->country }} </p>
                        </div>

                        <div class="col-md-11 b-r"><strong style="font-weight: bold; margin-right: 199px;"> Phone</strong>
                            <p>{{ $merchants->phone }} </p>
                        </div>

                        <div class="col-md-11 b-r"><strong style="font-weight: bold; margin-right: 199px;"> Address</strong>
                            <p>{{ $merchants->address }} </p>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Column -->
    <div class="col-lg-8 col-xlg-9 col-md-7">
        <div class="card">
            <div class="card-body">
                <h3 class="m-t-0"> Status </h3>

                <!-- <div class="btn btn-warning" style="margin-top: -31px; margin-left: 482px; font-weight: 600;">
                <input data-id="{{ $merchants->id }}" class="toggle-class success" type="checkbox"
                        data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" 
                        data-off="InActive" {{ $merchants->is_online ? 'checked' : '' }}> Restaurants On/Off  
                </div> -->

                <div class="text-right" style="margin-top: -43px;">
                                            <a href="{{ url('merchant-site/toggleUpdate', $merchants->id) }}" class="btn btn-success"> Offline</a>
                                    </div>
                <hr>

                <div class="row">
                    <div class="col-xs-6 b-r" style="max-height: 250px; overflow-y: hidden;"> <strong style="font-weight: bold;"> Cover Photo: </strong>
                        <br>
                        @if( $merchants->image)
                        <img width="100%" src="{{ env('UPLOAD_URL').'/'.$merchants->cover_image }}" alt="">
                        @else
                        <img src="{{ url('images/dummy-logo.png') }} " style="width: 153px; height: 153px;">
                        @endif
                        <!-- <img width="100%" src="{{ env('UPLOAD_URL').'/'.$merchants->cover_image }}"> -->
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection


@section('script')

<script type="text/javascript">
    $(function() {
        $('.toggle-class').change(function() {
            var is_online = $(this).prop('checked') == true ? 1 : 0;
            var id = $(this).data('id');
            console.log(is_online);
            $.ajax({
                type: "get",
                dataType: "json",
                url: "{{ url('merchant-site/toggleUpdate') }}/" + id,
                data: {
                    'is_online': is_online,
                    'id': id
                },
                success: function(data) {
                    sweetAlert("Updated successfully", "", "success");
                }
            });
        })
    })
</script>
@endsection