@extends("layouts.default")

@section("title", trans('lang.service_provider_',['name'=>__('lang.detail')]))

@section("block-header")
    @lang('lang.service_provider_',['name'=>__('lang.detail')])
    <small>
        @can('view_farmer')
            <a class="btn btn-primary" href="{{ route('service_provider.index') }}">@lang('lang.back')</a>
        @endcan
        @can('edit_farmer')
            <a class="btn btn-primary" href="{{ route('service_provider.edit', $service_provider->id) }}">@lang('lang.edit')</a>
        @endcan
    </small>
@stop

@section("breadcrumb")
    @parent
    <li class="breadcrumb-item">
        <a href="{{ route('service_provider.index') }}">@lang('lang.service_provider_',['name'=>__('lang.list')])</a>
    </li>
    <li class="breadcrumb-item active">
        @lang('lang.service_provider_',['name'=>__('lang.detail')])
    </li>
@stop

@section("content")


<!-- Basic Table -->
<div class="row">
    <div class="col-md-12 col-sm-12">
        @includeWhen(session("message"),"inc.alert")
        <div class="card">
            <div class="body">
                @include('service_provider.inc.profile')
            </div>
        </div>
    </div>
    <div class="col-md-12 col-sm-12 mrg-top-20">
        <div class="card">
            <div class="body">
                @include('service_provider.inc.services')
            </div>
        </div>
    </div>
</div>

<form id="modal-frm-service" action="" method="post"
      enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="id" id="hidden-id" value="0">
    <input type="hidden" name="service_provider_id"  value="{{$service_provider->id}}">
    <div id="modal-service" class="modal mrg-top-70" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content text-capitalize">
                <div class="modal-header">
                    <h5 class="modal-title frm-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <div class="form-group">
                        <select class="form-control" name="service_id" id="service-id">
                            <option value="0">Please select service</option>
                            @foreach($services as $k => $v)
                                <option value="{{$v->id}}">{{@$v->property->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <input 
                                class="form-control" 
                                type="number" 
                                step="any" 
                                name="property[price]" 
                                id="price" 
                                placeholder="@lang('lang.price') (Riel)">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="text-capitalize btn btn-secondary"
                            data-dismiss="modal">@lang('lang.close')</button>
                    <button type="submit"
                            class="text-capitalize btn-save btn btn-primary">@lang('lang.save')</button>
                </div>
            </div>
        </div>
    </div>
</form>


<style type="text/css">
    .mrg-top-20 {
        margin-top: 20px;
    }
    .mrg-top-70 {
        margin-top: 70px;
    }
    .small-mrg-bot {
        margin-bottom: 60px;
    }
    .modal-backdrop {
        position: inherit;
    }
</style>

@stop

@section('script')
    <script>

        const btnAssign = $(".btn-assign");
        const btnUpdate = $(".btn-update-pricing");
        const optServiceId = $("select#service-id");
        const latitude = "{{$latitude}}";
        const longitude = "{{$longitude}}";
        const has_map = "{{$has_map}}";

        if (has_map == '1') {
            var myLatLng = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: myLatLng
            });
            marker = new google.maps.Marker({
                map: map,
                position: myLatLng,
                title: ''
            });
        }

        btnAssign.on("click", function (event) {
            event.preventDefault();
            $("#method").remove();
            $("#modal-frm-service").attr('action', "{{route('service_price.store')}}");
            $("#hidden-id").val(0);
            $("#price").val('');
            optServiceId.val('');
            optServiceId.selectpicker('refresh');
            $(".frm-title").html('Equipments/Services');
            $("#modal-service").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        btnUpdate.on("click", function (event) {
            event.preventDefault();
            var me = $(this),
            info = me.data('info');
            $("#method").remove();
            $("#modal-frm-service").attr('action', "{{route('service_price.store')}}");
            $("#hidden-id").val(info.id);
            $("#price").val(info.price);
            optServiceId.val(info.service_id);
            optServiceId.selectpicker('refresh');
            $(".frm-title").html('Assign Equipments/Services');
            $("#modal-service").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

    </script>
@stop