@extends('layouts.master')
@section('css')
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <!--datatable responsive css-->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
        type="text/css" />
@endsection
@section('title')
    Branches
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex phcl-flx">
                    <h4 class="card-title mb-0 flex-grow-1">
                        Branches
                    </h4>
                    <div class="phcl-flx-btns">
                        {{-- <a class="btn btn-soft-primary waves-effect waves-light" href="#createModal"
                            data-bs-toggle="modal"><i class="las la-plus"></i> Add Branch</a> --}}
                    </div>
                </div>
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="las la-check-circle"></i>
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="card-body">
                    <table id="fixed-header" class="table table-bordered dt-responsive nowrap table-striped align-middle"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Name</th>
                                <th>Mobile No</th>
                                <th>Address</th>
                                <th>Gst No</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-light p-3">
                    <h5 class="modal-title" id="exampleModalLabel">&nbsp;</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="close-modal"></button>
                </div>
                <form id="branchForm" method="POST" class="tablelist-form" autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="_method" id="_method" />
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" name="name" id="branch-name" class="form-control"
                                placeholder="Enter branch name" required />
                        </div>
                        <div class="mb-3">
                            <label for="mobile_no" class="form-label">Mobile No</label>
                            <input type="number" name="mobile_no" id="mobile-no" class="form-control"
                                placeholder="Enter branch mobile no" />
                        </div>
                        <div class="mb-3">
                            <label for="address" class="form-label">Address</label>
                            <textarea class="form-control" id="address" name="address" rows="2" placeholder="Enter branch address" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="gst_no" class="form-label">Gst No</label>
                            <input type="string" name="gst_no" id="gst_no" class="form-control"
                                placeholder="Enter Gst No" />
                        </div>
                        <div class="mb-3">
                            <label for="b2b_sales_voucher_type" class="form-label">Default B2B Sales Voucher Type</label>
                            <select class="form-select" id="b2b_sales_voucher_type" name="b2b_sales_voucher_type">
                                <option value="">Select Default B2B Sales Voucher Type</option>
                                @foreach ($salesVoucherTypes as $salesVoucherType)
                                    <option value="{{ $salesVoucherType->id }}">{{ $salesVoucherType->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="b2c_sales_voucher_type" class="form-label">Default B2C Sales Voucher Type</label>
                            <select class="form-select" id="b2c_sales_voucher_type" name="b2c_sales_voucher_type">
                                <option value="">Select Default B2C Sales Voucher Type</option>
                                @foreach ($salesVoucherTypes as $salesVoucherType)
                                    <option value="{{ $salesVoucherType->id }}">{{ $salesVoucherType->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="b2b_sales_return_voucher_type" class="form-label">Default B2B Sales Return Voucher
                                Type</label>
                            <select class="form-select" id="b2b_sales_return_voucher_type"
                                name="b2b_sales_return_voucher_type">
                                <option value="">Select Default B2B Sales Return Voucher Type</option>
                                @foreach ($salesReturnVoucherTypes as $salesReturnVoucherType)
                                    <option value="{{ $salesReturnVoucherType->id }}">{{ $salesReturnVoucherType->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="b2c_sales_return_voucher_type" class="form-label">Default B2C Sales Voucher
                                Type</label>
                            <select class="form-select" id="b2c_sales_return_voucher_type"
                                name="b2c_sales_return_voucher_type">
                                <option value="">Select Default B2C Sales Return Voucher Type</option>
                                @foreach ($salesReturnVoucherTypes as $salesReturnVoucherType)
                                    <option value="{{ $salesReturnVoucherType->id }}">{{ $salesReturnVoucherType->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="receipt_voucher_type" class="form-label">Default Receipt Voucher
                                Type</label>
                            <select class="form-select" id="receipt_voucher_type" name="receipt_voucher_type">
                                <option value="">Select Default Receipt Voucher Type</option>
                                @foreach ($receiptVoucherTypes as $receiptVoucherType)
                                    <option value="{{ $receiptVoucherType->id }}">{{ $receiptVoucherType->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="status" name="status">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Print Type</label>
                            <select class="form-select" id="print_type" name="print_type">
                                <option value="">Print Type</option>
                                <option value="Proforma Print">Proforma Print</option>
                                <option value="Tax Invoice">Tax Invoice</option>
                                <option value="Estimate Invoice">Estimate Invoice</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Bank Ledger</label>
                            <select class="form-select" id="bank_ledger" name="bank_ledger">
                                <option value="">Select Bank Ledger</option>
                                @foreach ($bankLedgers as $bankLedger)
                                    <option value="{{ $bankLedger->id }}">{{ $bankLedger->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="modal-footer">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary" id="add-btn">Add Branch</button>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#b2b_sales_voucher_type').select2({
                placeholder: 'Select B2B Sales Voucher Type'
            });
            $('#b2c_sales_voucher_type').select2({
                placeholder: 'Select B2C Sales Voucher Type'
            });
            $('#b2b_sales_return_voucher_type').select2({
                placeholder: 'Select B2B Sales Return Voucher Type'
            });
            $('#b2c_sales_return_voucher_type').select2({
                placeholder: 'Select B2C Sales Return Voucher Type'
            });
            $('#receipt_voucher_type').select2({
                placeholder: 'Select Receipt Voucher Type'
            });
            $('#bank_ledger').select2({
                placeholder: 'Select Bank Ledger'
            });
            loadData();

            $('#print_type').select2({
                placeholder: 'Select print type',
                allowClear: true
            });
        });

        function loadData() {
            var dataTable = $('#fixed-header').DataTable({
                processing: true,
                serverSide: true,
                "scrollX": true,
                autoWidth: true,
                stateSave: true,
                ordering: false,
                pageLength: 10,
                lengthMenu: [
                    [10, 50, 100, -1],
                    [10, 50, 100, "All"]
                ],
                ajax: {
                    url: '/admin/branch',
                    type: 'GET',
                },
                columns: [{
                        data: 'code',
                        name: 'code',
                    },
                    {
                        data: 'name',
                        name: 'name',
                    },
                    {
                        data: 'mobile',
                        name: 'mobile',
                    },
                    {
                        data: 'address',
                        name: 'address',
                    },
                    {
                        data: 'gst_no',
                        name: 'gst_no',
                    },
                    {
                        data: 'status',
                        name: 'status',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
            });
        };

        document.getElementById("createModal").addEventListener("show.bs.modal", function(e) {
            $('#status').select2();
            if (e.relatedTarget.classList.contains("edit-list")) {
                document.getElementById("exampleModalLabel").innerHTML = "Edit Branch";
                document.getElementById("add-btn").innerHTML = "Update";
                document.getElementById("branchForm").setAttribute('action', '/admin/branch/' + e
                    .relatedTarget.dataset.id);
                document.getElementById("_method").value = "put";
                $.ajax({
                    type: "GET",
                    url: "/admin/branch/" + e.relatedTarget.dataset.id + '/edit',
                    success: function(response) {
                        if (response.status == "success") {
                            if (response.data.name == "Main Branch") {
                                $("#branch-name").prop("readonly", true);
                                $("#status").prop("disabled", true);
                            } else {
                                $("#branch-name").prop("readonly", false);
                                $("#status").prop("disabled", false);
                            }
                            $('#print_type').val(response.data.print_type).trigger('change');
                            document.getElementById("branch-name").value = response.data.name;
                            document.getElementById("mobile-no").value = response.data.mobile;
                            document.getElementById("address").value = response.data.address;
                            document.getElementById("gst_no").value = response.data.gst_no;
                            document.getElementById("status").value = response.data.status;
                            $('#b2b_sales_voucher_type').val(response.data.b2b_sales_voucher_type_id)
                                .trigger('change');
                            $('#b2c_sales_voucher_type').val(response.data.b2c_sales_voucher_type_id)
                                .trigger('change');
                            $('#b2b_sales_return_voucher_type').val(response.data
                                .b2b_sales_return_voucher_type_id).trigger('change');
                            $('#b2c_sales_return_voucher_type').val(response.data
                                .b2c_sales_return_voucher_type_id).trigger('change');
                            $('#receipt_voucher_type').val(response.data
                                .default_receipt_voucher_type_id).trigger('change');
                                $('#bank_ledger').val(response.data.default_bank_ledger_id).trigger('change');
                            $('#status').trigger('change');
                        } else {
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000,
                                timerProgressBar: true,
                            })

                            Toast.fire({
                                icon: 'error',
                                title: response.message,
                            })
                        }
                    },
                });
            } else {
                document.getElementById("branch-name").value = "";
                document.getElementById("mobile-no").value = "";
                document.getElementById("address").value = "";
                document.getElementById("b2b_sales_voucher_type").value = "";
                document.getElementById("b2c_sales_voucher_type").value = "";
                document.getElementById("b2b_sales_return_voucher_type").value = "";
                document.getElementById("b2c_sales_return_voucher_type").value = "";
                document.getElementById("receipt_voucher_type").value = "";
                document.getElementById("status").value = "1";
                $('#status').trigger('change');
                document.getElementById("exampleModalLabel").innerHTML = "Add Branch";
                document.getElementById("add-btn").innerHTML = "Add";
                document.getElementById("branchForm").setAttribute('action', '/admin/branch');
                document.getElementById("_method").value = "POST";
            }
        });

        $('#branchForm').validate({
            submitHandler: function(form, e) {
                e.preventDefault();
                var url = $(form).attr('action');
                var formData = new FormData(form);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status == 'success') {
                            form.reset();
                            Swal.fire({
                                title: 'Success!',
                                text: data.message,
                                icon: 'success',
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $('#createModal').modal('hide');
                                    $('#fixed-header').DataTable().ajax.reload();
                                }
                            })
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: data.message,
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            })
                        }
                    },
                    error: function(data) {
                        Swal.fire({
                            title: 'Error!',
                            text: data.message,
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        })
                    }
                });
            }
        });
    </script>
@endsection