@extends('layouts.app')

@section('title', 'Company Master')

@section('content')

<div class="container mt-3">
    <!-- Button Container -->
    <div class="row mb-3">
        <div class="col-md-12 d-flex justify-content-end">
            <button type="button" id="create_company" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCompanyModal">
                Add New Company
            </button>
        </div>
    </div>

    <!-- Add Company Modal -->
    <div class="modal fade" id="addCompanyModal" tabindex="-1" aria-labelledby="addCompanyModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title" id="addCompanyModalLabel">Add New Company</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addCompanyForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="companyId" name="id">

                        <!-- Logo Upload Section -->
                        <div class="text-center mb-4 position-relative">
                            <label for="companyLogoFile" class="form-label" style="border: 2px solid black; padding: 5px; border-radius: 50%; display: inline-block; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);">
                                <img src="{{ asset('assets/images/profile.png') }}" alt="Company Logo" class="img-fluid rounded-circle" id="logoPreview" style="width: 100px; height: 100px; object-fit: cover; cursor: pointer;">
                                <span id="removeLogo" class="position-absolute translate-middle" style="cursor: pointer; display: none; z-index: 10; font-size: 1.5rem; color: black;">&times;</span>
                            </label>
                            <input type="file" class="form-control mt-2" id="companyLogoFile" aria-hidden="false" name="company_logo" accept="image/*" style="display: none;" >
                            <p class="form-label">Please click on the image above to upload your Logo.</p>
                        </div>

                        <!-- Company Info -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="companyName" class="form-label">Company Name</label>
                                <input type="text" class="form-control" id="companyName" name="name" placeholder="Enter Company Name" required>
                            </div>
                            <div class="col-md-6">
                                <label for="companyPhone" class="form-label">Phone Number</label>
                                <input type="tel" class="form-control" id="companyPhone" name="phone_number" placeholder="Enter Phone Number" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="companyEmail" class="form-label">Email</label>
                                <input type="email" class="form-control" id="companyEmail" name="email" placeholder="Enter Company Email" required>
                            </div>
                        </div>

                        <!-- Address Info -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="addressLine1" class="form-label">Address Line 1</label>
                                <input type="text" class="form-control" id="addressLine1" name="address_line_1" placeholder="Enter Address Line 1" required>
                            </div>
                            <div class="col-md-6">
                                <label for="addressLine2" class="form-label">Address Line 2</label>
                                <input type="text" class="form-control" id="addressLine2" name="address_line_2" placeholder="Enter Address Line 2">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="area" class="form-label">Area</label>
                                <input type="text" class="form-control" id="area" name="area" placeholder="Enter Area" required>
                            </div>
                            <div class="col-md-6">
                                <label for="pincode" class="form-label">Pincode</label>
                                <input type="number" class="form-control" id="pincode" name="pincode" placeholder="Enter Pincode" required>
                            </div>
                        </div>

                        <!-- Location Info -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="country" class="form-label">Country</label>
                                <select class="form-select" id="country" name="country_id" required>
                                    <option value="">Select Country</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="state" class="form-label">State</label>
                                <select class="form-select" id="state" name="state_id" required>
                                    <option value="">Select State</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="city" class="form-label">City</label>
                                <select class="form-select" id="city" name="city_id" required>
                                    <option value="">Select City</option>
                                </select>
                            </div>
                        </div>

                        <!-- Status and Packages -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="statuss" name="status" required>
                                    <option value="1">Active</option>
                                    <option value="2">Inactive</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="packages" class="form-label">Packages</label>
                                <select class="form-select" id="packages" name="packages" required>
                                    <option value="">Select Package</option>
                                </select>
                            </div>
                        </div>

                        <!-- Buttons -->
                        <div class="d-flex justify-content-end mt-4">
                            <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Existing DataTable code -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="datatable" class="table table-striped dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Logo</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone Number</th>
                                <th>Address</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- DataTables will populate this -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CSRF Token Meta Tag -->
<meta name="csrf-token" content="{{ csrf_token() }}">

@endsection

@section('scripts')
<script type="text/javascript">
$(document).ready(function() {
    var ajaxURLSearchCountry = '{{ route("search.countrylist") }}';
    var ajaxURLSearchState = '{{ route("search.statelist") }}';
    var ajaxURLSearchCity = '{{ route("search.citylist") }}';
    var ajaxURLSearchPackage = '{{ route("search.package") }}';
    var companyListAjax = '{{ route("company.list.ajax") }}';
    var addCompanyAjax = '{{ route("add.company.ajax") }}';
    var companyGet = '{{ route("company.get") }}';
    var companyDelete = '{{ route("company.delete") }}';

    var csrfToken = $('meta[name="csrf-token"]').attr('content');

    let logoUploaded = false;
    let selectedCountryId = null;
    let selectedStateId = null;
     let viewAllClicked = false;
    $('#datatable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": companyListAjax,
                "type": "POST",
                "data": function(d) {
                    d._token = csrfToken;
                }
            },
            "columns": [
                {"data": "id"}, // Company ID
                {"data": "logo","orderable":false,"searchable":false}, // Company ID
                {"data": "name"}, // Company Name
                {"data": "email"}, // Company Email
                {"data": "phone_number"}, // Company Phone Number
                {"data": "address_line_1"}, // Address Line 1
                {"data": "status"}, // Status (Active/Inactive)
                {"data": "action","orderable":false,"searchable":false} // Action buttons (edit/delete)
            ],
            "initComplete": function() {
                const $label = $('#datatable_filter label');
                const $searchInput = $('#datatable_filter input');

                // Remove the text node "Search:"
                $label.contents().filter(function() {
                    return this.nodeType === 3;
                }).remove();

                $searchInput
                    .addClass('form-control search-input')
                    .attr('placeholder', 'Search menu...');

                $searchInput.wrap('<div class="position-relative"></div>');
                $searchInput.after('<i class="bx bx-search-alt search-icon"></i>');
            },
            "drawCallback": function() {
                const $info = $('#datatable_info');
                 $('#viewAllLink').remove();

                 const linkHtml = ` &nbsp;|&nbsp; <a href="javascript:void(0);" id="viewAllLink">
                        ${viewAllClicked ? 'Show Less <i class="fas fa-chevron-up"></i>' : 'View All <i class="fas fa-chevron-right"></i>'}
                    </a>`;

                    $info.append(linkHtml);

                $('#viewAllLink').off('click').on('click', function () {
                    const table = $('#datatable').DataTable();

                    viewAllClicked = !viewAllClicked;

                    usersPageLength = viewAllClicked ? -1 : 10;

                    table.page.len(usersPageLength).draw(false);  // false = stay on current page
                });
            }
        });




    // Logo Upload Handling
    $('#companyLogoFile').on('change', function(event) {
        const file = event.target.files[0];
        const validImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
        const maxSize = 2 * 1024 * 1024; // 2 MB

        if (file) {
            // Validate file type and size
            if (!validImageTypes.includes(file.type) || file.size > maxSize) {
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Image',
                    text: 'Please upload a valid image file (JPEG, PNG, GIF) with size less than 2MB.',
                });
                $('#companyLogoFile').val(''); // Reset file input
                $('#logoPreview').attr('src', '{{ asset('assets/images/profile.png') }}'); // Reset preview
                $('#removeLogo').hide(); // Hide remove icon
                logoUploaded = false; // Reset upload flag
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                $('#logoPreview').attr('src', e.target.result);
                $('#removeLogo').show(); // Show the remove icon
                logoUploaded = true; // Set the flag to true
            };
            reader.readAsDataURL(file);
        }
    });

    $('#removeLogo').on('click', function(event) {
        event.preventDefault();
        $('#logoPreview').attr('src', '{{ asset('assets/images/profile.png') }}');
        $('#companyLogoFile').val('');
        $(this).hide();
        logoUploaded = false;
    });

    // Form Submission Handling
    $('#addCompanyForm').on('submit', function(event) {
        event.preventDefault();
        $('#addCompanyForm button[type="submit"]').prop('disabled', true);

        if (!logoUploaded) {
            Swal.fire({
                icon: 'warning',
                title: 'No Logo Uploaded',
                text: 'Please upload a company logo before submitting the form.',
            });
            $('#addCompanyForm button[type="submit"]').prop('disabled', false);
            return;
        }

        if (!this.checkValidity()) {

            Swal.fire({
                icon: 'warning',
                title: 'Form Invalid',
                text: 'Please fill in all required fields.',
            });
            return;
        }

        $.ajax({
            url: addCompanyAjax,
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            processData: false,
            beforeSend: function() {
                // $('#preloader').show();
            },

            success: function(response) {

                toastr.success(response.message);
                $('#addCompanyModal').modal('hide');
                $('#datatable').DataTable().ajax.reload();
                $('#addCompanyForm button[type="submit"]').prop('disabled', false);
                setTimeout(function() {
                    // $('#preloader').fadeOut(700);
                    location.reload();
                }, 2000);
            },
            error: function(xhr) {
                let errorMessage = 'An unexpected error occurred.';

                if (xhr.responseJSON) {
                    if (xhr.responseJSON.errors) {
                        errorMessage = '';
                        for (const [key, value] of Object.entries(xhr.responseJSON.errors)) {
                            errorMessage += value.join(', ') + '<br>';
                        }
                    } else if (xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                }

                toastr.error(errorMessage);
            }
        });

    });

    $("#packages").select2({
        ajax: {
            url: ajaxURLSearchPackage,
            dataType: 'json',
            method: 'POST',
            delay: 250,
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            data: function(params) {
                return {
                    q: params.term || '',
                    page: params.page || 1
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;
                return {
                    results: data.data,
                    pagination: {
                        more: data.current_page < data.last_page
                    }
                };
            },
            cache: true
        },
        placeholder: 'Search for Packages',
        minimumInputLength: 0,
        dropdownParent: $("#addCompanyModal .modal-body"),
    });

    $("#city").select2({
        ajax: {
            url: ajaxURLSearchCity,
            dataType: 'json',
            method: 'POST',
            delay: 0,
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            data: function(params) {
                return {
                    q: params.term,
                    page: params.page,
                    state_id: selectedStateId,
                    country_id: selectedCountryId
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'Search for a city',
        dropdownParent: $("#addCompanyModal .modal-body"),
    });

    $("#country").select2({
        ajax: {
            url: ajaxURLSearchCountry,
            dataType: 'json',
            method: 'POST',
            delay: 0,
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            data: function(params) {
                return {
                    q: params.term,
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'Search for a country',
        dropdownParent: $("#addCompanyModal .modal-body"),
        }).on('select2:select', function(e) {
        selectedCountryId = e.params.data.id;
        $("#state").val(null).trigger('change');
        $("#city").val(null).trigger('change');
    });

    $("#state").select2({
        ajax: {
            url: ajaxURLSearchState,
            dataType: 'json',
            method: 'POST',
            delay: 0,
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            data: function(params) {
                return {
                    q: params.term,
                    page: params.page,
                    country_id: selectedCountryId
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'Search for a state',
        dropdownParent: $("#addCompanyModal .modal-body"),
        }).on('select2:select', function(e) {
        selectedStateId = e.params.data.id;
        $("#city").val(null).trigger('change');
    });

    $(document).on('click', '.edit-btn', function() {
        // $('#preloader').show();
        resetCompanyForm();
        var id = $(this).data('id');
        var url = companyGet+'?id='+id;
        $.ajax({
            url: url,
            method: 'GET',
            success: function(response) {
                var data = response.data;
                $('#addCompanyModalLabel').text('Edit Company #'+data.id);

                // Set company details
                $('#companyId').val(data.id);
                $('#companyName').val(data.name);
                $('#companyEmail').val(data.email);
                $('#companyPhone').val(data.phone_number);
                $('#addressLine1').val(data.address_line_1);
                $('#addressLine2').val(data.address_line_2);
                $('#area').val(data.area);
                $('#pincode').val(data.pincode);

                // Set city, state, and country
                setSelectValue('#city', data.city_id, data.city);
                setSelectValue('#state', data.state_id, data.state);
                setSelectValue('#country', data.country_id, data.country);
                setSelectValue('#packages', data.package_id, data.package);

                $('#statuss').val(data.status).trigger('change');
                // $('#packages').val(data.packages);
                console.log(data.img_src);
                if(data.img_src != ''){
                    $('#logoPreview').attr('src',data.img_src);
                    $('#removeLogo').attr('style','cursor: pointer;  z-index: 10; font-size: 1.5rem; color: black;');
                    logoUploaded = true;
                }
                // Show the modal
                $('#addCompanyModal').modal('show');
                // setTimeout(function() {
                //     $('#preloader').fadeOut(700);
                // }, 500);
            },
            error: function() {
                toastr.error('Failed to load company data.');
            }
        });
    });

    function setSelectValue(selectSelector, id, name) {
        var optionExists = $(selectSelector + ' option[value="' + id + '"]').length > 0;

        if (!optionExists) {
            var newOption = new Option(name, id, true, true);
            $(selectSelector).append(newOption);
        }

        $(selectSelector).val(id).trigger('change');
    }

    function resetCompanyForm() {
        $('#addCompanyModalLabel').text('Add New Company');
        $('#companyId').val('');
        $('#companyName').val('');
        $('#companyEmail').val('');
        $('#companyPhone').val('');
        $('#addressLine1').val('');
        $('#addressLine2').val('');
        $('#area').val('');
        $('#pincode').val('');
        $('#city').val('').trigger('change');
        $('#state').val('').trigger('change');
        $('#country').val('').trigger('change');
        $('#statuss').val('1').trigger('change');
        $('#packages').val('').trigger('change');

        $('#logoPreview').attr('src', '{{ url('assets/images/profile.png') }}');
        $('#logoPreview').attr('style', 'width: 100px; height: 100px; object-fit: cover; cursor: pointer;');
        $('#removeLogo').attr('style', 'cursor: pointer; z-index: 10; font-size: 1.5rem; color: black; display: none;');

    }
    $('#create_company').on('click', function() {
        resetCompanyForm();
    });

    $(document).on('click', '.delete-btn', function(e) {
        e.preventDefault();

        var id = $(this).data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: companyDelete+'?id='+id,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    success: function(data) {
                        if (data.message) {
                            Swal.fire('Deleted!', data.message, 'success');
                            $('#datatable').DataTable().ajax.reload(); // Reload the DataTable
                        } else {
                            Swal.fire('Error!', 'An unexpected error occurred while deleting the company.', 'error');
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire('Error!', xhr.responseJSON?.message || 'An unexpected error occurred.', 'error');
                    }
                });
            }
        });
    });


});
</script>
@endsection