@extends('layouts.dashboard')
@section('content') 
    <div class="container">    
        <div class="contentbox">
            <div class="contentboxheading"><i class="las la-map-marked-alt"></i> <span id="formStatus">Location Service Mapping</span>
                <a class="btn btn-primary pull-right mt-2 mr10 btn-form-toggle"><span>Show</span> Form</a> 
            </div>
            <div class="contentboxinner">
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
                <div class="form-container fhide">
                    <form id="formServiceLocation">
                        @csrf
                        <input type="hidden" id="hdn_id" value="" readonly>
                        <div id="form_container_id" class="row g-3 pb-4">
                            <div class="col-md-4">
                                <label for="fname" class="form-label ml-10">Select Services<span style="color:red">*</span></label>
                                <select class="form-control " multiple data-live-search="true" name="services[]" style="height:165px;">
                                    @foreach($services as $key=>$val)
                                    <option value="{{$key}}">{{$val}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="location" class="form-label ml-10">Location<span style="color:red">*</span></label>
                                <select class="form-control " data-live-search="true" name="location[]">
                                    <option value="">Select Location</option>
                                    @foreach($locations as $key=>$val)
                                    <option value="{{$key}}">{{$val}}</option>
                                    @endforeach
                                </select>
                                <label for="location" class="form-label ml-10 mt-3">Description</label>
                                <textarea class="form-control" name="description[]" placeholder="Description"></textarea>
                            </div>
                            <div class="col-md-1 d-none">
                                <i class="las la-trash mt-4 locserdel pointer"></i>
                            </div>
                        </div>
                        <div id="dummy_cells"></div>
                    </form>
                    <div class="text-left mb-4">
                        <button type="button" class="btn btn-primary mt-4" id="btn_add_more_sl">Add More</button>
                        <button type="button" class="btn btn-primary mt-4" id="btn_addLocationService">Save</button>
                        <button type="button" class="btn btn-primary mt-4" type="button" onclick="Javascript:window.location.reload()">Reset</button>
                    </div>
                </div>
            
                <div class="row">
                    <div class="subheading mt-2">Existing Locations & Services</div>
                    <div class="col-md-12">
                        <div class=" mt-3 mb-3 table-responsive">
                            <table class="table table-striped" id="tbl_addPatient">
                                <thead>
                                    <tr>
                                        <th width="10%">Action</th>
                                        <th>Location</th>
                                        <th>Services</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                        <th>Created By</th>
                                        <th>Created Date</th>
                                    </tr>
                                </thead>
                                <tbody id="ajaxData">@include('service-location.index_ajax')</tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer_scripts')
<script>
$(document).ready(function () {
    $("#btn_addLocationService").on('click', function() {
        let services = [];
        let location = [];
        let description = [];
        let slid =  $('#hdn_id').val();
        $('select[name="services[]"]').each(function(){
            let selected = [...this.selectedOptions].map(option => option.value);
            services.push(selected);
        });
        $('select[name="location[]"]').each(function(){
            let selected = $(this).val();
            location.push(selected);
        });
        $('textarea[name="description[]"]').each(function(){
            let selected = $(this).val();
            description.push(selected);
        });
        
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {_token:_token, slid:slid, services:services, location:location, description:description},
            url: APP_URL + "/save-service-locations",
            success: function(res) {
                if(res.status) {
                    window.location.reload();
                }
            },
            error: function(res) {
                ajax_error2(res);
            }
        });
    });
    
    $(document).on('click', '#btn_add_more_sl',function(event){
        let html = $('#form_container_id').html();
        $('#dummy_cells').append('<div class="row g-3 pb-4">'+html+'</div>');
        $('#dummy_cells .locserdel').parent().removeClass('d-none');
    });
    
    $(document).on('click', '.locserdel',function(event){
        $(this).parent().parent().remove();
    });

    $(document).on('click', '.deleteServiceLocation',function(event){
        Swal.fire({
            title: 'Are you sure?',
            text: "Want to delete selected record",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                let srvlocid = $(this).data('service_location_id');
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    data: {_token:_token, srvlocid:srvlocid},
                    url: APP_URL + "/delete-service-locations",
                    success: function(res) {
                        if (res.status) {
                            Swal.fire(
                                'Deleted!',
                                'Selected record deleted successfully.',
                                'success'
                            );
                            setTimeout(() => {
                                location.reload();
                            }, 2000);
                        }
                    },
                    error: function(res) {
                        ajax_error2(res);
                    }
                });
            }
        });
    });
});
</script>
@endsection