@php $titlePage = $data->name @endphp
@extends('dashboard.layouts.master')
@section('title')
    {{ $titlePage }}
@stop
@section('content')
    <div class="page-content-wrapper stores">
        <div class="page-content">
            <div class="page-head">
                <div class="page-title">
                    <h1>{{ $titlePage }}</h1>
                </div>
                @permission('delete-stores')
                <a href="javascript:;" title="{{ __('lang.delete') }}" data-id="{{ route('dashboard.stores.delete', $data->id) }}" class="red_icon confirmDeleteItem"><i class="icon-trash"></i></a>
                @endpermission

                @permission('update-stores')
                <a class="blue_icon" title="{{ __('lang.edit') }}" href="{{ route('dashboard.stores.edit', $data->id) }}"><i class="icon-note"></i></a>
                @endpermission
            </div>
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <a href="{{ route('dashboard') }}">{{ __('lang.dashboard') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <a href="{{ route('dashboard.stores') }}">{{ __('lang.stores') }}</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span class="active">{{ $titlePage }}</span>
                </li>
            </ul>
            <div class="row">
                <div class="col-md-12">
                    {{-- Include Messages Flash --}}
                    @include('includes.flash_msg')
                    <div class="portlet light bordered">
                        <div class="portlet-title tabbable-line">
                            <div class="caption caption-md">
                                <i class="icon-globe theme-font hide"></i>
                                <span class="caption-subject font-blue-madison bold uppercase">{{ __('lang.product_details') }}</span>
                            </div>
                        </div>
                        <div class="portlet-body form">
                            <div class="row">
                                <div class="col-md-12">
                                    <ul class="nav nav-tabs">
                                        <li class="active">
                                            <a href="#General" data-toggle="tab"> {{ __('lang.general') }} </a>
                                        </li>
                                        <li>
                                            <a href="#Address" data-toggle="tab"> {{ __('lang.address') }} </a>
                                        </li>
                                        <li>
                                            <a href="#StoreTimings" data-toggle="tab"> {{ __('lang.store_timings') }} </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane fade active in" id="General">
                                            <div class="col-lg-12">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.service') }}:</strong>
                                                        {{ $data->service->title }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.store_name') }}:</strong>
                                                        {{ $data->name }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.brief') }}:</strong>
                                                        {!! nl2br($data->brief) !!}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="display_elem preview_images">
                                                    <p><strong>{{ __('lang.logo') }}:</strong></p>
                                                    <a href="{{ asset($data->logo) }}" title="{{ __('lang.logo') }}">
                                                        <img class="storeImg" src="{{ asset($data->logo) }}">
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="display_elem preview_images">
                                                    <p><strong>{{ __('lang.commercial_registration') }}:</strong></p>
                                                    <a href="{{ asset($data->commercial_registration) }}" title="{{ __('lang.commercial_registration') }}">
                                                        <img class="storeImg" src="{{ asset($data->commercial_registration) }}">
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="display_elem preview_images">
                                                    <p><strong>{{ __('lang.national_id') }}:</strong></p>
                                                    <a href="{{ asset($data->national_id) }}" title="{{ __('lang.national_id') }}">
                                                        <img class="storeImg" src="{{ asset($data->national_id) }}">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="Address">
                                            <div class="col-lg-4">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.region') }}:</strong>
                                                        {{ $data->region->title }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.city') }}:</strong>
                                                        {{ $data->city->title }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="display_elem">
                                                    <p>
                                                        <strong>{{ __('lang.district') }}:</strong>
                                                        {{ $data->district->title }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <p><strong>{{ __('lang.address') }}:</strong></p>
                                                <div id="map"></div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="StoreTimings">
                                            <div class="table-responsive">
                                                <table style="margin-top: 10px;" class="table table-bordered table-striped table-condensed flip-content">
                                                    <thead class="flip-content">
                                                    <tr>
                                                        <th style="width: 100px"> {{ __('lang.days') }} </th>
                                                        <th> {{ __('lang.times') }} </th>
                                                        <th style="width: 250px;"> {{ __('lang.closed') }} </th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($data->hours as $get)
                                                        <tr>
                                                            <td>
                                                                {{ __('lang.' . $get->day) }}
                                                            </td>
                                                            <td>
                                                                <div class="col-md-6">
                                                                    <div class="form-group" style="text-align: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">
                                                                        <label>{{ __('lang.from') }} </label>
                                                                        <input type="time" readonly class="form-control" value="{{ $get->open_time }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group" style="text-align: {{ app()->getLocale() == 'ar' ? 'right' : 'left' }}">
                                                                        <label>{{ __('lang.to') }} </label>
                                                                        <input type="time" readonly class="form-control" value="{{ $get->close_time }}">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td><span class="day_{{ $get->closed ? 'close' : 'open' }}"></span> </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @permission('delete-stores')
    <form id="delete-form" style="display:none;" method="post">@csrf</form>
    @endpermission

    @permission('status-stores')
    <form id="statusForm" style="display:none;" method="post">@csrf</form>
    @endpermission
@stop
@section('css')
    <link href="{{ asset('admin/assets') }}/css/magnific-popup.css" rel="stylesheet" type="text/css" />
@stop
@section('js')
    <script src="{{ asset('admin/assets') }}/js/jquery.magnific-popup.min.js"></script>
    @include('dashboard.setting.map-key')
    <script>
        "use strict";
        let map;
        let lat = parseFloat('{{ $data->lat }}');
        let lng = parseFloat('{{ $data->lng }}');
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: lat,
                    lng: lng
                },
                zoom: 10
            });
            setTimeout(function(){
                if($('#map').find('.dismissButton').length == 1){
                    $('#map').children('div:nth-of-type(2)').remove();
                }
            },1000);
            var marker = new google.maps.Marker({
                position: {
                    lat: lat,
                    lng: lng
                },
                map: map,
            });
        }
        initMap();
    </script>
@stop