@extends('layouts.master')
@section('title', trans('admin.update_client'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet"
        href="{{ asset('admin_assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/jquery-timepicker/jquery-timepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/pickr/pickr-themes.css') }}" />
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => trans('admin.client_list'), 'url' => route('admin.client.index')],
            ['data' => trans('admin.update_client'), 'url' => null],
        ],
    ])
    <div class="row">
        <div class="col-md-9">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ trans('admin.update_client') }}</h5>
                </div>
                <div class="card-body">
                    @include('client._form')
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <x-create-update-date-component :createdAt="$client->created_at" :createdBy="$client->created_by" :updatedAt="$client->updated_at" :updatedBy="$client->updated_by" />
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-12">
            <!-- Address Table -->
            <div class="card">
                <h5 class="card-header">
                    <span class="float-start">{{ trans('admin.addresses_list') }}</span>
                    <span class="btn btn-primary btn-icon rounded-pill float-end create-new-address"><i
                            class="text-white ti ti-plus"></i></span>
                </h5>
                <div class="card-body">
                    <form action="{{ route('admin.address.store') }}" method="POST">
                        @CSRF
                        <input type="hidden" name="client_id" value="{{ $client->id }}">
                        <div class="table-responsive text-nowrap">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th><strong>{{ trans('admin.area') }} <span class="text-danger">*</span></strong>
                                        </th>
                                        <th><strong>{{ trans('admin.address') }} <span
                                                    class="text-danger">*</span></strong></th>
                                        <th><strong>{{ trans('admin.note') }}</strong></th>
                                        <th><strong>{{ trans('admin.action') }}</strong></th>
                                    </tr>
                                </thead>
                                <tbody class="table-body">
                                    @foreach ($client->addresses as $address)
                                        <tr>
                                            <td>
                                                <input type="hidden" name="address_id[]" value="{{ $address->id }}"
                                                    required>
                                                <select class="select2 form-select form-select-lg selectAddress"
                                                    user-allow-clear="true" name="address_area[]">
                                                    <option value="{{ $address->area_id }}">
                                                        {{ $address->area?->branch?->name }} - {{ $address->area?->name }}
                                                    </option>
                                                </select>
                                            </td>

                                            <td>
                                                <input class="form-control" type="text" name="address_name[]"
                                                    value="{{ $address->address }}" required>
                                            </td>

                                            <td>
                                                <input class="form-control" type="text" name="address_note[]"
                                                    value="{{ $address->note }}">
                                            </td>

                                            <td>
                                                <a class="btn btn-icon btn-danger text-white rounded-pill delete-item"
                                                    data-url="{{ route('admin.address.delete', $address->id) }}"><i
                                                        class="text-white ti ti-trash"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <button type="submit"
                            class="btn btn-success text-white mt-3 float-end">{{ trans('admin.save') }}</button>
                    </form>
                </div>
            </div>
            <!--/ Area Table -->
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/moment/moment.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/jquery-timepicker/jquery-timepicker.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/pickr/pickr.js') }}"></script>
    @include('layouts._form_validation_script')

@endsection

@section('page-script')
    <script>
        $(document).ready(function() {
            initAddressSelect('selectAddress');

            function initAddressSelect(className) {
                $('.' + className).select2({
                    ajax: {
                        url: "{{ route('admin.areas_with_branch_name_list') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                term: params.term, // search term
                                page: params.page
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;

                            return {
                                results: data.data,
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: '{{ trans('admin.search...') }}',
                    language: {
                        searching: function() {
                            return "{{ $placeholder ?? trans('admin.search...') }}";
                        },
                        noResults: function() {
                            return "{{ trans('admin.no_results_found') }}";
                        }
                    },
                    templateResult: function(data) {
                        return data.name || data.text;
                    },
                    templateSelection: function(data) {
                        return data.name || data.text;
                    }
                });
            }

            var index = 0;

            $('.create-new-address').on('click', function() {

                const cloneTrRow =
                    `<tr>
                        <td>
                            <input type="hidden" name="address_id[]" value="">
                            <select class="select2 form-select form-select-lg selectAddress_${index}" user-allow-clear="true" name="address_area[]"></select>
                        </td>
                        <td>
                            <input class="form-control" type="text" name="address_name[]" value="">
                        </td>
                        <td>
                            <input class="form-control" type="text" name="address_note[]" value="">
                        </td>
                        <td>
                            <a class="btn btn-icon btn-danger text-white rounded-pill delete-item" data-url=""><i class="text-white ti ti-trash"></i></a>
                        </td>
                    </tr>`;
                $('.table-body').append(cloneTrRow);
                initAddressSelect('selectAddress_' + index);
                index++;
            });
        });

        $(document).on('click', '.delete-item', function() {
            const URLData = $(this).data('url');
            const element = $(this);
            if (URLData === '') {
                element.closest('tr').remove();
            } else {
                Swal.fire({
                    title: "{{ trans('admin.are_you_sure') }}",
                    text: "{{ trans('admin.you_will_not_be_able_to_revert_this') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: "{{ trans('admin.yes_delete_it') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}",
                    customClass: {
                        confirmButton: 'btn btn-primary me-3 waves-effect waves-light',
                        cancelButton: 'btn btn-label-secondary waves-effect waves-light'
                    },
                    buttonsStyling: false
                }).then(function(result) {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: URLData,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            dataType: 'json',
                            success: function(response) {
                                if (response.errorMessage == null) {
                                    element.closest('tr').remove();
                                    Swal.fire({
                                        icon: 'success',
                                        title: response.data.message,
                                        customClass: {
                                            confirmButton: 'btn btn-success waves-effect waves-light'
                                        }
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: response.errorMessage,
                                        customClass: {
                                            confirmButton: 'btn btn-success waves-effect waves-light'
                                        }
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    }
                });
            }
        })
    </script>
@endsection