@extends('layouts.app')

@section('title')
@lang('Update Vendor')
@endsection

@section('css')
<!-- select2 css -->
<link href="{{ asset('build/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@component('components.breadcrumb')
@slot('li_1')
Vendors
@endslot
@slot('title')
Update Vendor
@endslot
@endcomponent

<!-- Alert Messages -->
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="mdi mdi-check-all me-2"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="mdi mdi-alert-circle-outline me-2"></i> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if ($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="mdi mdi-alert-circle-outline me-2"></i> Please fix the errors below.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                <h4 class="card-title">Basic Information</h4>
                <p class="card-title-desc">Fill all information below</p>

                <form action="{{ route('vendor.update', ['id' => Crypt::encryptString($vendor->id)]) }}" method="POST">
                    @csrf
                    <div class="row">

                        {{-- Company Registered Name --}}
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Company Registered Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('vendor_name') is-invalid @enderror" name="vendor_name" value="{{ old('vendor_name', $vendor->vendor_name) }}" required>
                            @error('vendor_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Business Type --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Business Type <span class="text-danger">*</span></label>
                            <select class="form-select select2 @error('vendor_type') is-invalid @enderror" name="vendor_type" id="vendor_type" required>
                                <option selected disabled>Choose...</option>
                                @foreach($types as $type)
                                <option value="{{ $type->code }}" {{ old('vendor_type', $vendor->vendor_type) == $type->code ? 'selected' : '' }}>
                                    {{ $type->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('vendor_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Business Group --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Group <span class="text-danger">*</span></label>
                            <select class="form-select select2 @error('vendor_group') is-invalid @enderror" name="vendor_group" id="vendor_group" required>
                                <option selected disabled>Choose...</option>
                                @foreach($groups as $group)
                                <option value="{{ $group->code }}" {{ old('vendor_group', $vendor->vendor_group) == $group->code ? 'selected' : '' }}>
                                    {{ $group->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('vendor_group') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Industry --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Industry <span class="text-danger">*</span></label>
                            <select class="form-select select2 @error('vendor_industry') is-invalid @enderror" name="vendor_industry" id="vendor_industry" required>
                                <option selected disabled>Choose...</option>
                                @foreach($industries as $industry)
                                <option value="{{ $industry->code }}" {{ old('vendor_industry', $vendor->vendor_industry) == $industry->code ? 'selected' : '' }}>
                                    {{ $industry->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('vendor_industry') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- NRIC / National ID --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">NRIC / National ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('national_id') is-invalid @enderror" name="national_id" value="{{ old('national_id', $vendor->national_id) }}" required>
                            @error('national_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Business Registration No --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Business Registration No <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('vendor_reg_no') is-invalid @enderror" name="vendor_reg_no" value="{{ old('vendor_reg_no', $vendor->vendor_reg_no) }}" required>
                            @error('vendor_reg_no') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>


                        {{-- Business Registration Date --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Business Registration Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('vendor_reg_date') is-invalid @enderror" name="vendor_reg_date" value="{{ old('vendor_reg_date', $vendor->vendor_reg_date) }}" required>
                            @error('vendor_reg_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Telephone --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Telephone <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('vendor_phone') is-invalid @enderror" name="vendor_phone" value="{{ old('vendor_phone', $vendor->vendor_phone) }}" required>
                            @error('vendor_phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Mobile Phone --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Mobile Phone</label>
                            <input type="text" class="form-control" name="vendor_mobile" value="{{ old('vendor_mobile', $vendor->vendor_mobile) }}">
                        </div>

                        {{-- Email --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('vendor_email') is-invalid @enderror" name="vendor_email" value="{{ old('vendor_email', $vendor->vendor_email) }}" required>
                            @error('vendor_email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Email (CC) --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email (CC)</label>
                            <input type="email" class="form-control" name="vendor_email_cc" value="{{ old('vendor_email_cc', $vendor->vendor_email_cc) }}">
                        </div>

                        {{-- Address Line 1 --}}
                        <div class="mb-3">
                            <label class="form-label">Address Line 1 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('vendor_address_1') is-invalid @enderror" name="vendor_address_1" value="{{ old('vendor_address_1', $vendor->vendor_address_1) }}" required>
                            @error('vendor_address_1') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>


                        {{-- Address Line 2 --}}
                        <div class="mb-3">
                            <label class="form-label">Address Line 2</label>
                            <input type="text" class="form-control" name="vendor_address_2" value="{{ old('vendor_address_2', $vendor->vendor_address_2) }}">
                            @error('vendor_address_2') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>


                        {{-- Postcode --}}
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Postcode <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('vendor_postcode') is-invalid @enderror" id="postcode" name="vendor_postcode" value="{{ old('vendor_postcode', $vendor->vendor_postcode) }}" required>
                            @error('vendor_postcode') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- City --}}
                        <div class="col-md-4 mb-3">
                            <label class="form-label">City <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="city" name="vendor_city" value="{{ old('vendor_city', $vendor->vendor_city) }}" required>
                            @error('vendor_city') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- State --}}
                        <div class="col-md-4 mb-3">
                            <label class="form-label">State <span class="text-danger">*</span></label>
                            <select class="form-select select2" id="vendor_state" name="vendor_state" required>
                                <option selected disabled>Choose...</option>
                                @foreach($states as $state)
                                <option value="{{ $state->code }}" {{ old('vendor_state', $vendor->vendor_state) == $state->code ? 'selected' : '' }}>
                                    {{ $state->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('vendor_state') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select select2" name="vendor_status" required>
                            @foreach($statuses as $status)
                            <option value="{{ $status->code }}" {{ old('status', $vendor->vendor_status) == $status->code ? 'selected' : '' }}>
                                {{ $status->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary w-md">Update Vendor</button>
                    <a href="{{ route('vendor.index') }}" class="btn btn-secondary">Cancel</a>
                </form>

            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Vendor Contacts</h4>
                <p class="text-muted">Manage contacts associated with this vendor.</p>

                <!-- Add Contact Button -->
                <button type="button" class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#contactModal" onclick="openContactModal()">Add Contact</button>

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Designation</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($vendor->contacts->count() > 0)
                            @foreach($vendor->contacts as $contact)
                            <tr>
                                <td>{{ $contact->contact_person }}</td>
                                <td>{{ $contact->contact_email }}</td>
                                <td>{{ $contact->contact_phone }}</td>
                                <td>{{ $contact->designation }}</td>
                                <td>
                                    <button type="button" class="btn btn-warning btn-sm editContactBtn" data-id="{{ $contact->id }}" data-name="{{ $contact->contact_person }}" data-email="{{ $contact->contact_email }}" data-phone="{{ $contact->contact_phone }}" data-designation="{{ $contact->designation }}" data-bs-toggle="modal" data-bs-target="#contactModal">
                                        Edit
                                    </button>
                                    <form action="{{ route('vendor.contact.delete') }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="contact_id" value="{{ $contact->id }}">
                                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                            @else
                            <tr>
                                <td colspan="5" class="text-center text-muted">No contacts added yet.</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

            </div>
        </div> <!-- end card-->

        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Vendor Bank Details</h4>
                <p class="text-muted">Manage bank accounts associated with this vendor.</p>

                <!-- Add Bank Button -->
                <button type="button" class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#bankModal" onclick="openBankModal()">Add Bank Account</button>

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Bank Name</th>
                                <th>Account No</th>
                                <th>Account Holder</th>
                                <th>Branch</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($vendor->banks->count() > 0)
                            @foreach($vendor->banks as $bank)
                            <tr>
                                <td>{{ $bank->bank_name }}</td>
                                <td>{{ $bank->bank_acct_no }}</td>
                                <td>{{ $bank->bank_acct_holder_name }}</td>
                                <td>{{ $bank->bank_branch }}</td>
                                <td>
                                    <button class="btn btn-warning btn-sm editBankBtn" data-id="{{ $bank->id }}" data-name="{{ $bank->bank_name }}" data-acct_no="{{ $bank->bank_acct_no }}" data-holder="{{ $bank->bank_acct_holder_name }}" data-branch="{{ $bank->bank_branch }}" data-primary="{{ $bank->bank_primary }}" data-bs-toggle="modal" data-bs-target="#bankModal">
                                        Edit
                                    </button>

                                    <form action="{{ route('vendor.bank.delete') }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="bank_id" value="{{ $bank->id }}">
                                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">Delete</button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                            @else
                            <tr>
                                <td colspan="5" class="text-center text-muted">No bank details added yet.</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- end row -->

<!-- Add/Edit Contact Modal -->
<div id="contactModal" class="modal fade" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contactModalLabel">Add Contact</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('vendor.contact.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="vendor_id" value="{{ $vendor->id }}">
                    <input type="hidden" id="contact_id" name="contact_id">

                    <div class="mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="contact_person" id="contact_person" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" name="contact_email" id="contact_email" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Phone <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="contact_phone" id="contact_phone" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Designation</label>
                        <input type="text" class="form-control" name="designation" id="designation">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select" name="status" id="contact_status" required>
                            @foreach($statuses as $status)
                            <option value="{{ $status->code }}">{{ $status->name }}</option>
                            @endforeach
                        </select>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Contact</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Add/Edit Bank Modal -->
<div id="bankModal" class="modal fade" tabindex="-1" aria-labelledby="bankModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bankModalLabel">Add Bank Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('vendor.bank.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="vendor_id" value="{{ $vendor->id }}">
                    <input type="hidden" id="bank_id" name="bank_id">

                    <div class="mb-3">
                        <label class="form-label">Bank Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="bank_name" id="bank_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Account No <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="bank_acct_no" id="bank_acct_no" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Account Holder Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="bank_acct_holder_name" id="bank_acct_holder_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Branch</label>
                        <input type="text" class="form-control" name="bank_branch" id="bank_branch">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Primary Bank</label>
                        <select class="form-select" name="bank_primary" id="bank_primary">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Bank</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('script')
<!-- select 2 plugin -->
<script src="{{ asset('build/libs/select2/js/select2.min.js') }}"></script>

<!-- dropzone plugin -->
<script src="{{ asset('build/libs/dropzone/dropzone-min.js') }}"></script>

<script>
    function openContactModal() {
        document.getElementById("contactModalLabel").innerText = "Add Contact";
        document.getElementById("contact_id").value = "";
        document.getElementById("contact_person").value = "";
        document.getElementById("contact_email").value = "";
        document.getElementById("contact_phone").value = "";
        document.getElementById("designation").value = "";
    }

    $(".editContactBtn").click(function() {
        let contactId = $(this).data("id");
        let contactName = $(this).data("name");
        let contactEmail = $(this).data("email");
        let contactPhone = $(this).data("phone");
        let contactDesignation = $(this).data("designation");

        // Populate modal fields
        $("#contact_id").val(contactId);
        $("#contact_person").val(contactName);
        $("#contact_email").val(contactEmail);
        $("#contact_phone").val(contactPhone);
        $("#designation").val(contactDesignation);
        $("#contact_status").val(response.status).trigger('change');
        // Update modal title
        $("#contactModalLabel").text("Edit Contact");

        // Change form action dynamically (if needed)
        $("#contactForm").attr("action", "{{ route('vendor.contact.update') }}");
    });

    function openBankModal() {
        document.getElementById("bankModalLabel").innerText = "Add Bank Details";
        document.getElementById("bank_id").value = "";
        document.getElementById("bank_name").value = "";
        document.getElementById("bank_acct_no").value = "";
        document.getElementById("bank_acct_holder_name").value = "";
        document.getElementById("bank_branch").value = "";
        document.getElementById("bank_primary").value = "0";
    }

    function editBank(bank) {
        document.getElementById("bankModalLabel").innerText = "Edit Bank Details";
        document.getElementById("bank_id").value = bank.id;
        document.getElementById("bank_name").value = bank.bank_name;
        document.getElementById("bank_acct_no").value = bank.bank_acct_no;
        document.getElementById("bank_acct_holder_name").value = bank.bank_acct_holder_name;
        document.getElementById("bank_branch").value = bank.bank_branch;
        document.getElementById("bank_primary").value = bank.bank_primary;
    }

</script>

<script>
    $(document).ready(function() {
        $('.select2').select2();
        // Open Contact Modal for Editing

        // Fetch city and state based on postcode
        $("#postcode").on("blur", function() {
            let postcode = $(this).val();
            if (postcode.length > 0) {
                $.ajax({
                    url: "/api/postcode/" + postcode
                    , method: "GET"
                    , success: function(response) {
                        if (response) {
                            $("#city").val(response.city);
                            $("#vendor_state").val(response.state_code).trigger('change');
                        } else {
                            alert("Invalid postcode.");
                        }
                    }
                });
            }
        });

        function editContact(contact) {
            document.getElementById("contactModalLabel").innerText = "Edit Contact";
            document.getElementById("contact_id").value = contact.id;
            document.getElementById("contact_person").value = contact.contact_person;
            document.getElementById("contact_email").value = contact.contact_email;
            document.getElementById("contact_phone").value = contact.contact_phone;
            document.getElementById("designation").value = contact.designation;
        }

        function openBankModal() {
            document.getElementById("bankModalLabel").innerText = "Add Bank Details";
            document.getElementById("bank_id").value = "";
            document.getElementById("bank_name").value = "";
            document.getElementById("bank_acct_no").value = "";
            document.getElementById("bank_acct_holder_name").value = "";
            document.getElementById("bank_branch").value = "";
            document.getElementById("bank_primary").value = "0";
        }

        function editBank(bank) {
            document.getElementById("bankModalLabel").innerText = "Edit Bank Details";
            document.getElementById("bank_id").value = bank.id;
            document.getElementById("bank_name").value = bank.bank_name;
            document.getElementById("bank_acct_no").value = bank.bank_acct_no;
            document.getElementById("bank_acct_holder_name").value = bank.bank_acct_holder_name;
            document.getElementById("bank_branch").value = bank.bank_branch;
            document.getElementById("bank_primary").value = bank.bank_primary;
        }

        // Edit Bank Modal - Populate Fields
        $(".editBankBtn").click(function() {
            let bankId = $(this).data("id");
            let bankName = $(this).data("name");
            let bankAcctNo = $(this).data("acct_no");
            let bankAcctHolder = $(this).data("holder");
            let bankBranch = $(this).data("branch");
            let bankPrimary = $(this).data("primary");

            // Populate form fields
            $("#bank_id").val(bankId);
            $("#bank_name").val(bankName);
            $("#bank_acct_no").val(bankAcctNo);
            $("#bank_acct_holder_name").val(bankAcctHolder);
            $("#bank_branch").val(bankBranch);
            $("#bank_primary").val(bankPrimary);

            // Change modal title
            $("#bankModalLabel").text("Edit Bank Details");

            // Change form action dynamically
            $("#bankForm").attr("action", "{{ route('vendor.bank.update') }}");
        });

        // Reset Bank Modal when adding a new one
        function openBankModal() {
            $("#bankModalLabel").text("Add Bank Details");
            $("#bankForm").attr("action", "{{ route('vendor.bank.store') }}");
            $("#bank_id").val("");
            $("#bank_name").val("");
            $("#bank_acct_no").val("");
            $("#bank_acct_holder_name").val("");
            $("#bank_branch").val("");
            $("#bank_primary").val("0");
        }

    });

</script>

@endsection