@extends('layouts.master')
@section('meta')
<meta name="csrf-token" content="{{ csrf_token() }}">
@stop
@section('content')
<div class="col-lg-12 grid-margin stretch-card" style="min-height: 80vh;">
    <div class="card">
        <div class="card-body">
            <div class="page-header">
                <h3 class="page-title">Services</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('home')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Price List</li>
                    </ol>
                </nav>
            </div>
            
            <div class="col-lg-12 d-flex flex-row justify-content-between p-2">
                <div>
                    <form class="d-flex" method="GET" action="{{ route('services.index') }}">
                        <input class="me-2" name="query" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-primary" type="submit">Search</button>
                    </form>
                </div>
                <div class="d-flex flex-row">
                    <label class="me-2">Filter by category: </label>
                    <select id="category_search" name="category_search" class="select2 form-control">
                        <option value="">Select category</option>
                        @foreach($categories as $category)
                        <option @if(request('filter') == $category->id) selected="selected" @endif value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div><button type="button" class="btn btn-primary manage-service"  data-url="{{ route('services.store') }}" data-mode="add">Add New Price</button></div>
            </div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th> Service Name </th>
                        <th> Category Name </th>
                        <th> List Order </th>
                        <th> Amount </th>
                        <th>  </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($services as $service)
                    <tr>
                        <td> {{$service->service_name}} </td>
                        <td> {{ !empty($service->category->name)?$service->category->name:"" }} </td>
                        <td> {{ $service->order }} </td>
                        <td> £ {{ $service->price }} </td>
                        <td align="right"> 
                            <!-- <span class="icon-bg"><i role="button" class="mdi mdi-24px mdi-magnify"></i></span> -->
                            <span class="icon-bg manage-service" data-url="{{ route('services.update', $service->id) }}" data-mode="edit" data-id="{{ $service->id }}"><i role="button" class="mdi mdi-24px mdi-pencil-box"></i></span>
                            <span class="icon-bg delete-service" data-url="{{ route('services.destroy', $service->id) }}"><i role="button" class="mdi mdi-24px mdi-delete"></i></span>
                    
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="pagination justify-content-end pt-2">
                {{ $services->links('pagination::bootstrap-4') }}
            </div>

        </div>
    </div>
    <div class="modal" id="manageCategory" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create Service</h5>
                    <a type="button" id="close-c" class="" data-bs-dismiss="modal" aria-label="Close">
                        <i class="mdi mdi-close"></i>
                    </a>
                </div>
                <div class="modal-body">
                    <div id="error" class="alert alert-warning" role="alert" style="color: #ff0000;"></div>
                    <input type="hidden" id="id" />

                    <form class="forms-sample">
                        @csrf
                        <div class="form-group">
                            <label for="name">Service Name</label>
                            <input type="text" class="form-control" name="name" id="name" placeholder="Service Category Name">
                        </div>
                        <div class="form-group">
                            <label for="description">Service Category</label>
                            <select id="category" name="category" class="select2 form-control">
                                @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="description">Price</label>
                            <input class="form-control" name="price" id="price" value="0.00" />
                        </div>
                        <div class="form-group">
                            <label for="name">Price Description (If no price is specified)</label>
                            <input type="text" class="form-control" name="description" id="description">
                        </div>
                        <div class="form-group">
                            <label for="order">Order</label>
                            <input class="form-control" name="order" id="order" value="0" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="save" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@stop


@section('scripts')
<script>
    (function($) {
        'use strict';

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.manage-service').on('click', function(e) {
            var mode = $(this).data('mode');
            var action = $(this).data('url');
            var idval = $(this).data('id');
            var method = "";

            $('#id').val(idval);
            if(mode == 'add') {
                $('#manageCategory').find('.modal-title').text("Create Service");
                method = 'POST';
            } else {
                $('#manageCategory').find('.modal-title').text("Edit Service");
                method = 'PUT';
            }

            $('#manageCategory').find('form').attr('action', action);
            $('#manageCategory').find('form').attr('method', method);

            // Show the modal
            $('#manageCategory').modal('show');
        });

        $('.delete-service').on('click', function(e) {
            var url = $(this).data('url');
            confirm("Are you sure you want to delete this Service?", url);
        });

        // $('#category').select2();
        $('#error').hide();
        $('#save').on('click', function(e) {
            var url = $('#manageCategory').find('form').attr('action');
            var method = $('#manageCategory').find('form').attr('method');
            $.ajax({
                url: url,
                type: method,
                data: {
                    _token: '{{ csrf_token() }}',
                    name: $('#name').val(),
                    category: $('#category').val(),
                    price: $('#price').val(),
                    description: $('#description').val(),
                    order: $('#order').val(),
                    // Add other data fields if necessary
                },
                dataType: 'json',
                success: function(response) {
                    $('#manageCategory').modal('toggle');
                    showSwal('success-message', "Service has been successfully created", true);
                },
                error: function(response) {
                    $('#error').text(response.responseJSON.message).show();
                    console.log(response.responseJSON);
                    // Display validation errors or perform error handling
                }
            });
        });
        
        $('#manageCategory').on('show.bs.modal', function() {
            var id = $('#id').val();
            var url = $('#manageCategory').find('form').attr('action');
            if(id > 0) {
                $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#manageCategory').find('form').find('#name').val(response.service_name);
                    $('#manageCategory').find('form').find('#category').val(response.service_category_id);
                    $('#manageCategory').find('form').find('#price').val(response.price);
                    $('#manageCategory').find('form').find('#description').val(response.description);
                    $('#manageCategory').find('form').find('#order').val(response.order);
                },
                error: function(response) {
                    
                }
            });
            }
        });

        $('#category_search').on('change', function() {
            window.location.href = "{{ route('services.index') }}?filter="+$(this).val();
        });
    })(jQuery);
</script>
@stop