@extends('layouts.app')
@section('title', 'Clientele List')
@section('content')
<div class="container page-content">
    <div class="row page-col">
        <div class="col-8">
            <h1 class="font-weight-bold typography-4 mb-0">Clientele List</h1>
        </div>
        <div class="col-4 text-end">
            <a class="btn btn-secondary btn-custom" href="{{ route('clientele-get-import-csv') }}">
                <div class="btn-icon me-2"><i class="fas fa-upload"></i></div>
                <div class="btn-text">Import CSV</div>
            </a>
        </div>
    </div>
    <div class="row page-col">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-12 col-lg-6 text-start mt-lg-0 mt-3">
                            <input class="form-control" id="search_input" type="text" placeholder="Search..">
                        </div><!-- Search Bar -->
                        <div class="col-12 col-lg-3 mt-lg-0 mt-3">
                            <div class="mw-100">
                                <select class="select-search" onchange="window.location.href=this.options[this.selectedIndex].value;">
                                    <option value="{{ route('clientele-index') }}">All Status</option>
                                    @foreach ($status_types as $index => $status)
                                        @if( $current_route == 'clientele-filter' )
                                            <option value="{{ route('clientele-filter') }}?status={{$index}}" @if(request()->has('status') && request()->status == $index) selected @endif>{{ $status }}</option>
                                        @else
                                            <option value="{{ route('clientele-filter') }}?status={{$index}}">{{ $status }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div><!-- Status Filter -->
                        @if( Auth::user()->hasPermissionTo('manage clientele') )
                            <div class="col-12 col-lg-3 text-end mt-lg-0 mt-3">
                                <a class="btn btn-purple btn-custom" href="{{ route('clientele-create') }}">Create New</a>
                            </div><!-- Create New -->
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    @if ( $clienteles->isEmpty() )
                        <h4 class="typography-2 font-weight-semibold text-grey text-center mb-0">- N/A -</h4>
                    @else
                        <div class="d-flex justify-content-end pt-2">
                            {!! $clienteles->links() !!}    
                        </div>
                        <div class="table-responsive">
                            <table id="clientele_table" class="table table-hover valign-child-middle sortable">
                                <thead class="table-light">
                                    <tr>
                                        <th>No</th>
                                        <th>Code</th>
                                        <th>Prefix</th>
                                        <th colspan="2">Clientele Name</th>
                                        <th>Company Name</th>
                                        <th>Tags</th>
                                        <!--<th>Since</th>-->
                                        <th class="sortable_duration" data-order="{{ request()->sort_duration_order == 'asc' ? 'desc' : 'asc'  }}">Duration</th>
                                        <th class="text-center">Work Count</th>
                                        @if( Auth::user()->hasPermissionTo('manage clientele') || Auth::user()->hasPermissionTo('manage quotation') )
                                            <th class="text-center">Quotations</th>
                                        @endif
                                        <th>Status</th>
                                        <th width="15%" class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($clienteles as $index => $clientele)
                                    <tr data-href="{{ route('clientele-view', $clientele->id) }}">
                                        <th>{{ $index + $clienteles->firstItem() }}</th>
                                        <td class="text-center">{{ $clientele->code?? '-' }}</td>
                                        <td class="text-center">{{ $clientele->prefix?? '-' }}</td>
                                        <td>{{ (strlen($clientele->name) > 20) ? substr($clientele->name, 0, 20) . '...' : $clientele->name }}</td>
                                        {{-- <td>{{ $clientele->name }}</td> --}}
                                        <td>
                                            <span class="fa-layers fa-fw fs-3 me-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="<div class='text-start p-2'>Remarks:<br/>{{ $clientele->remarks ?: '-' }}</div>">
                                                <i class="fas fa-circle text-main"></i>
                                                <i class="fas fa-info fa-inverse text-white" data-fa-transform="shrink-8"></i>
                                            </span>
                                        </td>
                                        {{-- <td>{{ (strlen($clientele->company_name) > 20) ? substr($clientele->company_name, 0, 20) . '...' : $clientele->company_name }}</td> --}}
                                        <td>{{ $clientele->company_name }}</td>
                                        <td>
                                            @if( $clientele->getWorkTags() )
                                                @foreach ($clientele->getWorkTags() as $key => $tag)
                                                    <span class="badge bg-secondary me-3">
                                                        <i class="fas fa-tag"></i> {{ $tag }}
                                                    </span>
                                                @endforeach
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <!--<td>{{ $clientele->getFirstWork() ? \Carbon\Carbon::create($clientele->getFirstWork()->start_date)->format('Y-m') : 'N/A' }}</td>-->
                                        <td>
                                            @if( $clientele->getWorkDurations() )
                                                @foreach ($clientele->getWorkDurations() as $key => $duration)
                                                    <span class="badge bg-input-color me-3 mb-1" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="<div class='text-start p-2'>{{ $duration['Y-m-d'] }}</div>">
                                                        {{ $duration['Y-m'] }}
                                                    </span><br>
                                                @endforeach
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <td class="text-center">{{ $clientele->clienteleWorks->count() }}</td>
                                        @if( Auth::user()->hasPermissionTo('manage quotation') )
                                            <td class="special-td text-center">
                                                <a class="btn btn-link" href="{{ route('quotation-filter', ['company' => $clientele->id])}}">{{ $clientele->clienteleQuotations->count() }}</a>
                                            </td>
                                        @elseif( Auth::user()->hasPermissionTo('manage clientele') )
                                            <td class="text-center">{{ $clientele->clienteleQuotations->count() }}</td>
                                        @endif
                                        <td>
                                        	<span class="badge {{ $clientele->active ? 'bg-success' : 'bg-danger' }}">
                                        		{{ $clientele->active ? 'Active' : 'Inactive' }}
                                        	</span>
                                        </td>
                                        <td class="special-td text-end">
                                            @if( Auth::user()->hasPermissionTo('manage clientele') )
                                                <a class="btn btn-primary btn-action" href="{{ route('clientele-edit', $clientele->id) }}" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="Edit clientele ({{ $clientele->name }})"><i class="fas fa-edit text-white"></i></a>   
                                                <a class="btn btn-danger btn-action btn-alert-delete" data-action="{{ route('clientele-delete', $clientele->id) }}" href="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="Delete clientele ({{ $clientele->name }})"><i class="far fa-trash-alt text-white"></i></a>
                                                <a class="btn btn-info btn-action" data-clientele-id="{{ $clientele->id }}"  data-clientele-company="{{ $clientele->company_name }}" href="" data-bs-toggle="modal" data-bs-placement="right" data-bs-html="true" data-bs-target="#duplicateModal" title="Duplicate clientele ({{ $clientele->name }})"><i class="fas fa-regular fa-copy text-white"></i></a>   
                                            @else
                                                <a class="btn btn-info btn-action" href="{{ route('clientele-view', $clientele->id) }}" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="View clientele ({{ $clientele->name }})"><i class="fas fa-eye text-white"></i></a>   
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-end">
                            {!! $clienteles->links() !!}    
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>  
@endsection
@push('modal')
    <div class="modal fade" id="duplicateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="duplicate_model_title" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="modalForm" action="{{ route('clientele-duplicate') }}" method="POST" autocomplete="off">
                    @csrf
                    <input type="hidden" id="clientele_id" name="clientele_id" value="">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modal-title"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3 row">
                            <label id="prefix_label" for="prefix" class="col-12 col-form-label required-label">
                                Prefix
                            </label>
                            <div class="col-12">
                                <textarea id="prefix" class="form-control @error('prefix') is-invalid @enderror" name="prefix" rows="3" placeholder="Enter clientele prefix here.."></textarea>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label id="name_label" for="name" class="col-12 col-form-label required-label">
                                Clientele Name
                            </label>
                            <div class="col-12">
                                <textarea id="name" class="form-control @error('name') is-invalid @enderror" name="name" rows="3" placeholder="Enter clientele name here.."></textarea>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label id="company_name_label" for="company_name" class="col-12 col-form-label required-label">
                                Company Name
                            </label>
                            <div class="col-12">
                                <textarea id="company_name" class="form-control @error('company_name') is-invalid @enderror" name="company_name" rows="3" placeholder="Enter clientele company name here.."></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-black" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="ms-3 btn btn-purple" id="submit" name="action">
                            Duplicate
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div><!-- Modal Duplicate Clientele  -->
@endpush
@push('js')
<script type="text/javascript">
    $(function(){
        // Client-side handling for sorting the "Duration" column
        $('#clientele_table th.sortable_duration').click(function(e) {
            e.preventDefault();
            // Get the current sort order
            var sortOrder = $(this).data('order');

            // Toggle sort order
            var nextSortOrder = sortOrder === 'asc' ? 'desc' : 'asc'; 

            // Update data-order attribute
            $(this).data('order', nextSortOrder);

            // Construct the URL with the updated sort order
            var url = '/clientele?sort_duration_order=' + sortOrder;

            window.location.href = url;
        });
        // Prevent sorting when clicking the "Duration" header
        $('#clientele_table th.sortable_duration').on('mousedown', function(e) {
            // Prevent sorting when clicking on the header
            e.stopPropagation();
        });
        // Client-side handling for clicking other headers
        $('#clientele_table th:not(.sortable_duration)').click(function() {
            // Remove sort_duration_order parameter from the URL
            var url = window.location.href.split('?')[0];
            window.location.href = url;
        });

        $('#duplicateModal').on('show.bs.modal', function (e) {

            var button = $(e.relatedTarget); // Button that triggered the modal
            var clientele_id = button.data('clientele-id'); // Extract data-clientele-id
            var clientele_company_name = button.data('clientele-company'); // Extract data-clientele-company

            // Set the hidden input value
            $('#clientele_id').val(clientele_id);
            $('#modal-title').text(`Duplicate Clientele - ${clientele_company_name}`);
        });

        $('#modalForm').on('submit', function(e){
            e.preventDefault();

            var formData = $(this).serialize(); // Serialize all form inputs
            var button = $('#submit'); // Directly select the submit button by its ID

            button.data('inner-text', button.html());
            button.prop('disabled', true);
            button.html('<i class="fas fa-circle-notch fa-spin" style="margin-right: 5px;"></i> Loading');

            $.ajax({
                url: '{{ route("clientele-duplicate")}}',
                method: 'POST',
                headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')},
                data: formData,
                success: function(response){
                    window.location.href = response.url;

                }, error: function (xhr, textStatus, errorThrown) {
                    var response_json = xhr.responseJSON;

                    if(response_json.clientele_not_found == true){
                        console.log(response_json, xhr);
                    }

                    if(response_json.clientele_prefix_missing == true){
                        Swal.fire({
                            title: 'Prefix Not Found',
                            text: "This Clientele has no prefix!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Add Prefix!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = "/clientele/edit/" + response_json.clientele_id;
                            }
                        });   
                    }

                    button.prop('disabled', false);
                    button.html(button.data('inner-text'));

                    // display the error message
                    var error = JSON.parse(xhr.responseText);
                    if (error.prefix){
                        $('#prefix').addClass('is-invalid');
                        $('#prefix').after('<div class="invalid-feedback"><strong>' + error.prefix + '</strong></div>');
                    }
                    if (error.name){
                        $('#name').addClass('is-invalid');
                        $('#name').after('<div class="invalid-feedback"><strong>' + error.name + '</strong></div>');
                    }
                    if (error.company_name){
                        $('#company_name').addClass('is-invalid');
                        $('#company_name').after('<div class="invalid-feedback"><strong>' + error.company_name + '</strong></div>');
                    }
                }
            })
        });
    });
</script>
@endpush