@extends('_layouts.front', [
    "title" => "Beranda"
])

@section('content')
    <!-- start hero section -->
    <section class="section pb-0 hero-section" style="height: 500px;" id="hero">
        <div class="bg-overlay bg-overlay-pattern"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-sm-10">
                    <div class="text-center mt-lg-5 pt-5">
                        <h1 class="display-6 fw-semibold mb-3 lh-base"><span class="text-success">Titik Muat</span> - Aplikasi Logistik</h1>
                        <p class="lead text-muted lh-base">Pengiriman barang dengan aman dan cepat.</p>

                        <div class="d-flex gap-2 justify-content-center mt-4">
                            <a href="#ongkir" class="btn btn-primary">Cek Ongkir <i class="ri-arrow-right-line align-middle ms-1"></i></a>
                            <a href="#track" class="btn btn-danger">Lacak Paket <i class="ri-eye-line align-middle ms-1"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
        <div class="position-absolute start-0 end-0 bottom-0 hero-shape-svg">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 0 1440 120">
                <g mask="url(&quot;#SvgjsMask1003&quot;)" fill="none">
                    <path d="M 0,118 C 288,98.6 1152,40.4 1440,21L1440 140L0 140z">
                    </path>
                </g>
            </svg>
        </div>
        <!-- end shape -->
    </section>
    <!-- end hero section -->

    <!-- start services -->
    <section class="section" id="ongkir">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mb-5">
                        <h1 class="mb-3 ff-secondary fw-semibold lh-base">Cek Ongkos Kirim Pengiriman</h1>
                        <p class="text-muted">Silahkan cek harga pengiriman antar kota.</p>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row g-3">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form id="submit">
                                <div class="row">
                                    <div class="col-lg-3 mb-3">
                                        <div class="form-group">
                                            <label for="from_region_id" class="form-label">Dari</label>
                                            <select name="from_region_id" id="from_region_id" class="form-control from_region_id">
                                                <option value="">Dari</option>
                                            </select>
                                            <small class="text-danger error" id="error-from_region_id"></small>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <div class="form-group">
                                            <label for="to_region_id" class="form-label">Tujuan</label>
                                            <select name="to_region_id" id="to_region_id" class="form-control to_region_id">
                                                <option value="">Tujuan</option>
                                            </select>
                                            <small class="text-danger error" id="error-to_region_id"></small>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <div class="form-group">
                                            <label for="logistics_id" class="form-label">Logistik</label>
                                            <select name="logistics_id" id="logistics_id" class="form-control logistics_id">
                                                <option value="">Logistik</option>
                                            </select>
                                            <small class="text-danger error" id="error-logistics_id"></small>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 mb-3">
                                        <div class="form-group">
                                            <label for="weight" class="form-label">Berat</label>
                                            <div class="input-group">
                                                <input type="text" name="weight" id="weight" class="form-control weight" autocomplete="off" placeholder="Berat">
                                                <span class="input-group-text">Kg</span>
                                            </div>
                                            <small class="text-danger error" id="error-weight"></small>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 d-grid gap-2">
                                        <button type="submit" class="btn btn-primary">Cek Ongkir</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div>
                            <div class="card-header">
                                <h6 class="card-title">Hasil</h6>
                            </div>
                            <div id="output" class="card-body"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </section>
    <!-- end services -->

    <!-- start services -->
    <section class="section" id="track">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mb-5">
                        <h1 class="mb-3 ff-secondary fw-semibold lh-base">Lacak Pengiriman</h1>
                        <p class="text-muted">Silahkan tracking pengiriman Anda berdasarkan ID Tracking atau No. Resi.</p>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row g-3">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <form id="submit">
                                <div class="row">
                                    <div class="col-lg-12 mb-3">
                                        <div class="form-group">
                                            <label for="receipt_number" class="form-label">ID / No. Resi</label>
                                            <input type="text" name="receipt_number" id="receipt_number" class="form-control receipt_number" autocomplete="off" placeholder="ID / No. Resi">
                                            <small class="text-danger error" id="error-receipt_number"></small>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 d-grid gap-2">
                                        <button type="submit" class="btn btn-primary">Lacak Paket</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6" id="output">
                </div>
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </section>
    <!-- end services -->
@endsection

@section('javascript')
    <script type="text/javascript">
        class Home extends App {
            constructor() {
                super()
            }

            _from_region() {
                this.apiSelect2({
                    url: `/api/location/region`,
                    element: `#ongkir form#submit [name=from_region_id], #ongkir form#submit [name=to_region_id]`
                })
            }

            _logistics() {
                this.apiSelect2({
                    url: `/api/logistics/select2`,
                    element: `#ongkir form#submit [name=logistics_id]`
                })
            }

            postageCheck(e) {
                e.preventDefault()

                let formData = this.formData(`#ongkir form#submit`)

                $(`#ongkir form#submit input, #ongkir form#submit select, #ongkir form#submit button`).prop(`disabled`, true)

                $(`#ongkir form#submit .error`).html(``)
                $(`#ongkir #output`).html(`
                    <div class="alert alert-primary">
                        Sedang menghitung ongkir.
                    </div>
                `)

                this.api({
                    url: `/api/delivery/postageCheck`,
                    method: `POST`,
                    data: formData,
                    success: e => {
                        $(`#ongkir form#submit .error`).html(``)
                        $(`#ongkir form#submit input, #ongkir form#submit select, #ongkir form#submit button`).prop(`disabled`, false)

                        let data = e.data

                        let output = ``

                        $.each(data, function (index, value) {
                            output += `
                                <input type="radio" class="btn-check" name="service" value="${ value.service }" id="service_${ value.service }">
                                <label class="btn btn-outline-primary w-100" for="service_${ value.service }">
                                    <div class="row">
                                        <div class="col-lg-3" style="text-align: left !important;">
                                            <b>${ value.code }</b><br />
                                            <small>${ value.name }</small>
                                        </div>
                                        <div class="col-lg-3" style="text-align: left !important;">
                                            <b>${ value.service }</b><br />
                                            <small>${ value.description }</small>
                                        </div>
                                        <div class="col-lg-3 d-flex align-items-center">
                                            ${ value.cost.etd != null ? value.cost.etd : `-` }
                                        </div>
                                        <div class="col-lg-3 d-flex align-items-center justify-content-center">
                                            <b>${ value.cost.value }</b>
                                        </div>
                                    </div>
                                </label>
                            `
                        })

                        $(`#ongkir #output`).html(`
                            <div class="hstack gap-2 flex-column">
                                ${ output }
                            </div>
                        `)
                    },
                    error: err => {
                        let error = err.message

                        $(`#ongkir form#submit input, #ongkir form#submit select, #ongkir form#submit button`).prop(`disabled`, false)

                        $(`#ongkir form#submit .error`).html(``)

                        $.each(error, function (index, value) {
                            $(`#ongkir form#submit .error#error-${ index }`).html(value)
                        })

                        $(`#ongkir #output`).html(``)
                    }
                })
            }

            tracking(e) {
                e.preventDefault()

                let receipt_number = $(`#track form#submit [name=receipt_number]`).val()

                $(`#track form#submit input, #track form#submit button`).prop(`disabled`, true)

                $(`#track #output`).html(``)

                if (receipt_number == "") {
                    this.alertDanger(`ID/No. Resi harus diisi!`)
                    $(`#track form#submit input, #track form#submit button`).prop(`disabled`, false)
                }else {
                    this.api({
                        url: `/api/delivery/${ receipt_number }/show`,
                        success: e => {
                            let data = e.data

                            $(`#track form#submit input, #track form#submit button`).prop(`disabled`, false)

                            $(`#track form#submit .error`).html(``)

                            let histories = ``

                            $.each(data.package_histories, function (index, value) {
                                histories += `
                                    <tr>
                                        <td>${ value.created_at }</td>
                                        <td>${ value.message }</td>
                                    </tr>
                                `
                            })

                            let output = `
                                <div class="card">
                                    <div class="card-body">
                                        <!-- Accordions with Icons -->
                                        <div class="accordion custom-accordionwithicon" id="accordionWithicon">
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="accordionwithiconExample1">
                                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accor_iconExamplecollapse1" aria-expanded="true" aria-controls="accor_iconExamplecollapse1">
                                                        <i class="ri-information-line"></i> &nbsp;Informasi Paket &nbsp;<span class="badge bg-${ data.status.label }">${ data.status.name }</span>
                                                    </button>
                                                </h2>
                                                <div id="accor_iconExamplecollapse1" class="accordion-collapse collapse show" aria-labelledby="accordionwithiconExample1" data-bs-parent="#accordionWithicon">
                                                    <div class="accordion-body">
                                                        <div class="table-responsive">
                                                            <table class="table">
                                                                <tbody>
                                                                    <tr>
                                                                        <th>Pengirim</th>
                                                                        <td>
                                                                            <b>${ data.sender.name }</b>
                                                                            <div>${ data.sender.address }</div>
                                                                            <div>${ data.sender.subdistrict.name }, ${ data.sender.city.type } ${ data.sender.city.name }, ${ data.sender.province.name }.</div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Penerima</th>
                                                                        <td>
                                                                            <b>${ data.recipient.name }</b>
                                                                            <div>${ data.recipient.address }</div>
                                                                            <div>${ data.recipient.subdistrict.name }, ${ data.recipient.city.type } ${ data.recipient.city.name }, ${ data.recipient.province.name }.</div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Nama Paket</th>
                                                                        <td>${ data.name }</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Total Bayar</th>
                                                                        <td>${ data.total }</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="accordionwithiconExample2">
                                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accor_iconExamplecollapse2" aria-expanded="false" aria-controls="accor_iconExamplecollapse2">
                                                        <i class="ri-truck-line"></i>&nbsp; History Perjalanan Paket
                                                    </button>
                                                </h2>
                                                <div id="accor_iconExamplecollapse2" class="accordion-collapse collapse" aria-labelledby="accordionwithiconExample2" data-bs-parent="#accordionWithicon">
                                                    <div class="accordion-body">
                                                        <div class="table-responsive">
                                                            <table class="table">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Tanggal</th>
                                                                        <th>Keterangan</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    ${ histories }
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `

                            $(`#track #output`).html(output)
                        },
                        error: err => {
                            let error = err.message

                            $(`#track form#submit input, #track form#submit button`).prop(`disabled`, false)

                            $(`#track form#submit .error`).html(``)

                            $.each(error, function (index, value) {
                                $(`#track form#submit .error#error-${ index }`).html(value)
                            })
                        }
                    })
                }
            }
        }

        var home = new Home

        home._from_region()
        home._logistics()

        $(document).on(`submit`, `#ongkir form#submit`, function(e) {
            home.postageCheck(e)
        })

        $(document).on(`submit`, `#track form#submit`, function(e) {
            home.tracking(e)
        })
    </script>
@endsection