@extends('layouts.master')

@section('title')
    LT-99 :: จัดการสาขาร้าน
@endsection

@section('sub_title')
    จัดการสาขาร้าน
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">รายการสาขา</h3>
                        </div>
                        <div class="col text-right">
                            <a href="#add" data-toggle="modal" class="btn btn-sm btn-danger">
                                <i class="fas fa-plus text-white-50 mr-1"></i> เพิ่มสาขา
                            </a>
                        </div>
                    </div>
                </div>
                @if (count($stores))
                    <div class="table-responsive pb-3">
                        <table class="table table-sm table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th class="align-middle text-center">ลำดับ</th>
                                    <th class="align-middle text-center">ชื่อสาขา</th>
                                    <th class="align-middle text-center">รหัสสาขา</th>
                                    <th class="align-middle text-center">จำนวนพนักงาน</th>
                                    <th class="align-middle text-center">เครดิตตั้งต้น</th>
                                    <th class="align-middle text-center">เครดิต</th>
                                    <th class="align-middle text-center">สถานะ</th>
                                    <th class="align-middle text-center">ดำเนินการ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($stores as $key => $store)
                                    <tr>
                                        <td class="align-middle text-center">{{ $key + 1 }}</td>
                                        <td class="align-middle text-center">{{ $store->store_name }}</td>
                                        <td class="align-middle text-center text-danger font-weight-bold">{{ str_pad($store->id, 5, 0, STR_PAD_LEFT) }}</td>
                                        <td class="align-middle text-center">{{ $store->staff->count() }} คน</td>
                                        <td class="align-middle text-center text-default">
                                            {{ nf($store['default_credit'], true) }}
                                        </td>
                                        <td class="align-middle text-center text-primary">
                                            {{ number_format($store->wallet()->sum('amount'), 2) }} THB
                                        </td>
                                        <td class="align-middle text-center">
                                            <span class="badge text-xs badge-{{ $store->status ? 'success' : 'danger' }}">{{ $store->status ? 'เ' : '' }}ปิดทำการ</span>
                                        </td>
                                        <td class="align-middle text-center">
                                            <a href="#edit" class="btn btn-sm btn-warning"
                                                data-toggle="modal" onclick="fetchStore({{ $store->id }})" title="แก้ไข">
                                                <i class="fas fa-edit text-white-50 mr-1"></i>แก้ไข
                                            </a>
                                            <a href="{{ route('storeLotterySetting.index', $store) }}" class="btn btn-sm btn-default" title="จัดการพนักงาน">
                                                <i class="fas fa-cogs text-white-50 mr-1"></i> ตั้งค่า
                                            </a>
                                            <a href="{{ route('staff.index') . '?storeId=' . $store->id }}" class="btn btn-sm btn-primary" title="จัดการพนักงาน">
                                                <i class="fas fa-users text-white-50 mr-1"></i> พนักงาน
                                            </a>
                                            <a href="#" class="btn btn-sm btn-info d-none" title="เคลียเครดิต" onclick="clearCredit(event, {{ $store->id }})">
                                                <i class="fas fa-users text-white-50 mr-1"></i> เคลียเครดิต
                                            </a>
                                            <form delete-store action="{{ route('store.destroy', $store) }}" onsubmit="this.preventDefault() && deleteStore(this)"
                                                method="post" class="d-inline-block">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger"
                                                    data-toggle="modal" data-id="{{ $store->id }}" title="ลบ">
                                                    <i class="fas fa-trash mr-1 text-white-50"></i>ลบ
                                                    </a>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="card-body">
                        <h2 class="text-center py-4 text-muted font-weight-light">ไม่มีสาขา ณ​ ปัจจุบัน</h2>
                    </div>
                @endif
            </div>

        </div>

    </div>

    <div class="modal fade" id="add" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form id="add-form" class="modal-content bg-secondary bg-secondary">
                @csrf
                <div class="modal-header bg-transparent border-0">
                    <h3 class="modal-title">เพิ่มหน้าร้าน</h3>
                    <button class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>ชื่อสาขา</label>
                        <input type="text" class="form-control form-control-alternative" name="store_name"
                            placeholder="กรุณาระบุชื่อร้าน" required>
                    </div>
                    <div class="form-group">
                        <label>เครดิต</label>
                        <div class="input-group input-group-alternative">
                            <input type="number" class="form-control form-control-alternative" name="amount" min="0"
                                {{ $agentCredit ? "max=\"$agentCredit\"" : '' }} placeholder="กรุณาระบุเครดิต" required>
                            <span class="input-group-text">บาท</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>เครดิตตั้งต้น</label>
                        <div class="input-group input-group-alternative">
                            <input type="number" class="form-control form-control-alternative" name="default_credit" min="0"
                                {{ $agentCredit ? "max=\"$agentCredit\"" : '' }} placeholder="กรุณาระบุเครดิตตั้งต้น" required>
                            <span class="input-group-text">บาท</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>รายละเอียด (ท้ายใบเสร็จ)</label>
                        <textarea class="form-control form-control-alternative" rows="3" name="store_detail"
                            placeholder="รายละเอียด (ท้ายใบเสร็จ)"></textarea>
                    </div>
                    {{-- <hr/>
                    <div class="d-flex justify-content-between pb-3">
                        <h3 class="text-center">อัตราจ่าย</h3>
                        <label class="custom-toggle">
                            <input type="checkbox" class="copyFirstRow" />
                            <span class="custom-toggle-slider rounded-circle" data-label-off="ปิด" data-label-on="เปิด"></span>
                        </label>
                    </div>

                    <ul class="nav nav-pills nav-fill flex-column flex-sm-row" id="tabs-text" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0 active show" data-toggle="tab" href="#line_a"
                                role="tab" aria-controls="tabs-text-1" aria-selected="true">ไลน์ A</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#line_b" role="tab"
                                aria-controls="tabs-text-2" aria-selected="false">ไลน์ B</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#line_c" role="tab"
                                aria-controls="tabs-text-3" aria-selected="false">ไลน์ C</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade active show" id="line_a" role="tabpanel">
                            @foreach ($lotteryTypes as $key => $lotteryValue)
                                @php
                                $maxLineA = $userCommission ?
                                $userCommission['a'][$lotteryValue->type]['discount']:100;
                                @endphp
                                <div class="form-row my-3">
                                    <label
                                        class="col-sm-4 col-form-label text-center">{{ $lotteryValue->type }}</label>
                                    <div class="form-group col-sm-4">
                                        <select class="form-control" name="percent[a][{{ $key }}]"
                                            title="กรุณาเลือกส่วนลด" required>
                                            <option disabled="" value="" {{ (Auth::user()->isAdmin() ? 'selected':'') }}>ส่วนลด / เงินรางวัล</option>
                                            @if ($userCommission && $maxLineA == 0)
                                                <option {{ (Auth::user()->isAdmin() ? '':'seelcted') }}>{{ $maxLineA }}</option>
                                            @else
                                                @for ($i = 0; $i <= $maxLineA; $i++)
                                                    <option {{ (Auth::user()->isAdmin() ? '':($i == $maxLineA ? 'selected' : '')) }}>{{ $i }}
                                                    </option>
                                                @endfor
                                            @endif
                                        </select>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <input type="text" min="1" class="form-control"
                                            placeholder="กรุณาระบุเงินรางวัล"
                                            value="{{ $userCommission ? $userCommission['a'][$lotteryValue->type]['payment'] : '' }}"
                                            name="payment_line[a][{{ $key }}]" title="กรุณาระบุเงินรางวัล" required>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="line_b" role="tabpanel">
                            @foreach ($lotteryTypes as $key => $lotteryValue)
                                @php
                                $maxLineB = $userCommission ?
                                $userCommission['b'][$lotteryValue->type]['discount']:100;
                                @endphp
                                <div class="row my-3">
                                    <label
                                        class="col-sm-4 col-form-label text-center">{{ $lotteryValue->type }}</label>
                                    <div class="form-group col-sm-4">
                                        <select class="form-control" name="percent[b][{{ $key }}]"
                                            title="กรุณาเลือกส่วนลด" required>
                                            <option disabled="" value="" {{ (Auth::user()->isAdmin() ? 'seelcted':'') }}>ส่วนลด / เงินรางวัล</option>
                                            @if ($userCommission && $maxLineB == 0)
                                                <option {{ (Auth::user()->isAdmin() ? '':'seelcted') }}>{{ $maxLineB }}</option>
                                            @else
                                                @for ($i = 0; $i <= $maxLineB; $i++)
                                                    <option {{ (Auth::user()->isAdmin() ? '':($i == $maxLineB ? 'selected' : '')) }}>{{ $i }}
                                                    </option>
                                                @endfor
                                            @endif
                                        </select>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <input type="text" min="1" class="form-control"
                                            placeholder="กรุณาระบุเงินรางวัล"
                                            value="{{ $userCommission ? $userCommission['b'][$lotteryValue->type]['payment'] : '' }}"
                                            name="payment_line[b][{{ $key }}]" title="กรุณาระบุเงินรางวัล" required>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="line_c" role="tabpanel">
                            @foreach ($lotteryTypes as $key => $lotteryValue)
                                @php
                                $maxLineC = $userCommission ?
                                $userCommission['c'][$lotteryValue->type]['discount']:100;
                                @endphp
                                <div class="row my-3">
                                    <label
                                        class="col-sm-4 col-form-label text-center">{{ $lotteryValue->type }}</label>
                                    <div class="form-group col-sm-4">
                                        <select class="form-control" name="percent[c][{{ $key }}]"
                                            title="กรุณาเลือกส่วนลด" required>
                                            <option disabled="" value="" {{ (Auth::user()->isAdmin() ? 'seelcted':'') }}>ส่วนลด / เงินรางวัล</option>
                                            @if ($userCommission && $maxLineC == 0)
                                                <option {{ (Auth::user()->isAdmin() ? '':'seelcted') }}>{{ $maxLineC }}</option>
                                            @else
                                                @for ($i = 0; $i <= $maxLineC; $i++)
                                                    <option {{ (Auth::user()->isAdmin() ? '':($i == $maxLineC ? 'selected' : '')) }}>{{ $i }}
                                                    </option>
                                                @endfor
                                            @endif
                                        </select>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <input type="text" min="1" class="form-control"
                                            placeholder="กรุณาระบุเงินรางวัล"
                                            value="{{ $userCommission ? $userCommission['c'][$lotteryValue->type]['payment'] : '' }}"
                                            name="payment_line[c][{{ $key }}]" title="กรุณาระบุเงินรางวัล" required>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div> --}}
                </div>
                <div class="modal-footer bg-transparent border-0">
                    <button class="btn btn-danger" type="submit"><i class="fas fa-save mr-1"></i> ยืนยัน</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="edit" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form id="edit-form" class="modal-content bg-secondary bg-secondary">
                @csrf
                @method('PUT')
                <div class="modal-header bg-transparent border-0">
                    <h3 class="modal-title">แก้ไขข้อมูลสาขา</h3>
                    <button class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label>ชื่อสาขา</label>
                        <input type="text" id="edit-store-name" class="form-control form-control-alternative"
                            name="store_name" placeholder="กรุณาระบุชื่อร้าน" required>
                    </div>
                    <div class="form-group">
                        <label>สถานะ</label>
                        <select id="edit-store-status" class="form-control form-control-alternative" name="status">
                            <option value="0">ปิดทำการ</option>
                            <option value="1">เปิดทำการ</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>เครดิตตั้งต้น</label>
                        <div class="input-group input-group-alternative">
                            <input id="edit-store-default-credit" type="number" class="form-control form-control-alternative" name="default_credit" min="0"
                                {{ $agentCredit ? "max=\"$agentCredit\"" : '' }} placeholder="กรุณาระบุเครดิตตั้งต้น" required>
                            <span class="input-group-text">บาท</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>รายละเอียด (ท้ายใบเสร็จ)</label>
                        <textarea id="edit-store-detail" class="form-control form-control-alternative" rows="3"
                            name="store_detail" placeholder="รายละเอียด (ท้ายใบเสร็จ)"></textarea>
                    </div>

                </div>
                <div class="modal-footer bg-transparent border-0">
                    <button class="btn btn-danger" type="submit"><i class="fas fa-save mr-1"></i> ยืนยันการแก้ไข</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        'use strict';

        window.fetchStore = id => {
            tryCatchSwal(async () => {
                const result = await fetchJson(`{{ route('store.index') }}/${id}`);

                const editStoreName = document.getElementById('edit-store-name');
                const editStoreDetail = document.getElementById('edit-store-detail');
                const editStoreStatus = document.getElementById('edit-store-status');
                const editStoreDefaultCredit = document.getElementById('edit-store-default-credit');

                editStoreName.value = result.store_name;
                editStoreDetail.value = result.store_detail;
                for (const el of document.forms['edit-form']['edit-store-status'].querySelectorAll(
                    'option')) {
                    el.selected = el.value == result.status;
                }
                editStoreDefaultCredit.value = result.default_credit;

                document.forms['edit-form'].action = `{{ url('/agent/store') }}/${id}`;
            })
        }

        const deleteForm = document.querySelectorAll('[delete-store]');
        for (const form of deleteForm) {
            form.addEventListener('submit', async e => {
                e.preventDefault();
                const confirm = await swal({
                    title: 'ยืนยันการลบ',
                    text: 'หากคุณลบแล้ว จะไม่สามารถย้อนกลับได้อีก โปรดยืนยันเพื่อทำรายการต่อ',
                    icon: 'warning',
                    dangerMode: true,
                    buttons: ['ยกเลิก', 'ยืนยัน'],
                });
                if (!confirm) return;

                const formData = new FormData(form);
                tryCatchSwal(async () => {
                    switchSubmitBtnState(form);
                    const result = await fetchJson(form.action, 'POST', formData);
                    if (!result) return;
                    swal('สำเร็จ', 'ลบข้อมูลสาขาเรียบร้อย', 'success')
                        .then(() => location.reload());
                }, () => switchSubmitBtnState(form));
            });
        }

        document.addEventListener('DOMContentLoaded', () => {

            @if ($errors->any())
                swal('ขออภัย', '{{ $errors->first() }}', 'error');
            @enderror

            const addForm = document.forms['add-form'];
            addForm.addEventListener('submit', async e => {
                e.preventDefault();

                tryCatchSwal(async () => {
                    const confirm = await swal({
                        title: 'โปรดยืนยัน',
                        text: 'หากคุณได้ตรวจสอบข้อมูลทั้งหมดถูกต้องครบถ้วนแล้ว โปรดยืนยันเพื่อทำรายการต่อ',
                        icon: 'warning',
                        buttons: ['ยกเลิก', 'ยืนยัน'],
                    });
                    if (!confirm) return;

                    const formData = new FormData(addForm);

                    switchSubmitBtnState(addForm);
                    const result = await fetchJson(`{{ route('store.index') }}`,
                        'POST', formData);
                    if (!result) return false;
                    const setting = await swal('สำเร็จ', 'เพิ่มข้อมูลสาขาใหม่เรียบร้อย', 'success', {
                        button: 'ตั้งค่าร้านค้า',
                        closeOnClickOutside: false,
                    });
                    location.href = result.settingsRoute;
                }, () => switchSubmitBtnState(addForm));
            });

            const editForm = document.forms['edit-form'];
            editForm.addEventListener('submit', async e => {
                e.preventDefault();

                const confirm = await swal({
                    title: 'โปรดยืนยัน',
                    text: 'หากคุณได้ตรวจสอบข้อมูลทั้งหมดถูกต้องครบถ้วนแล้ว โปรดยืนยันเพื่อทำรายการต่อ',
                    icon: 'warning',
                    buttons: ['ยกเลิก', 'ยืนยัน'],
                });
                if (!confirm) return;

                const formData = new FormData(editForm);
                console.log(formData);
                tryCatchSwal(async () => {
                    switchSubmitBtnState(editForm);
                    const result = await fetchJson(editForm.action, 'POST', formData);
                    if (!result) return;
                    swal('สำเร็จ', 'แก้ไขข้อมูลสาขาเรียบร้อย', 'success')
                        .then(() => location.reload());
                }, () => switchSubmitBtnState(editForm));
            });
        });

    </script>
    <script>
        function clearCredit(e, storeId) {
            e.preventDefault();
            swal('ยืนยันการเคลียเครดิต?', ' ', 'info', { buttons: ['ยกเลิก', 'ยืนยัน'] })
                .then((sure) => {
                    if(sure){
                        $.getJSON(`{{ route('storeCredit.clear') }}`, {storeId:storeId}, function(res){
                            if(res.success){
                                swal('เคลียเครดิตเรียบร้อย', ' ', 'success')
                                    .then(() => location.reload());
                            }else{
                                swal('ไม่สามารถทำรายการได้', res.text, 'error');
                            }
                        });
                    }
                });
        }

        function nf(text, classname = 'success', icon = 'ni ni-bell-55') {
            $.notify({
                icon: icon,
                title: text,
                message: ''
            }, {
                type: classname,
                allow_dismiss: true,
                newest_on_top: false,
                showProgressbar: false,
                placement: {
                    from: "top",
                    align: "right"
                },
                delay: 1000,
                mouse_over: null,
                animate: {
                    enter: 'animated fadeInDown',
                    exit: 'animated fadeOutUp'
                },
                z_index: 999999,
            });
        }
        $(function(){
            var copyFirstRow = false;
            $('.copyFirstRow').on('change', function(){
                if($(this).prop('checked')){
                    nf(' เปิดใช้งานการตั้งค่าตามแถวแรก', 'success', 'fas fa-check fa-lg');
                    copyFirstRow = true;
                }else{
                    nf(' ปิดใช้งานการตั้งค่าตามแถวแรก', 'danger', 'fas fa-times fa-lg');
                    copyFirstRow = false;
                }
            });

            $('.limit-helper').on('keyup', function(){
                if(copyFirstRow){
                    let firstValue = $(this).val();
                    let attr_help = $(this).attr('data-helper_name');

                    $.each($('[data-helper_name="' + attr_help + '"]'), function(index, value) {
                        $(this).val(firstValue);
                    });
                }
            });

            $('select[name*="percent"]').on('change', function() {
                var val = $(this).val();
                var at = $(this).attr('name').slice(8, -4);
                if (copyFirstRow) {
                    $('select[name*="percent[' + at + ']"] option').each(function() {
                        if (this.text == val) {
                            $(this).prop('selected', true);
                        }
                    });
                }
            });

            $('[name*=payment_line]').on('change', function() {
                var val = $(this).val();
                var at = $(this).attr('name').slice(13, -4);
                if (copyFirstRow) {
                    $('[name*="payment_line[' + at + ']"]').each(function(i, n) {
                        $(this).val(val);
                    });
                }
            });
        });
    </script>
@endsection