@extends('layouts.master')

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

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

@section('content')
    <div class="row">
        @if (!$stores->count())
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-body">
                        <h2 class="text-center py-4 text-muted font-weight-light">คุณยังไม่มีร้านค้า ณ​ ปัจจุบัน</h2>
                    </div>
                </div>
            </div>
        @endif
        @foreach ($stores as $store)
            <div class="col-sm-auto">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0 text-primary">สาขา: <span>{{ $store->store_name }}</span></h3>
                            </div>
                            <div class="col-auto text-right">
                                <span
                                    class="badge badge-pill badge-{{ $store->status ? 'success' : 'danger' }} text-xs">{{ $store->status ? 'เ' : '' }}ปิดทำการ</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-0 pb-2">
                        <table class="table table-sm table-borderless" style="font-size: .9rem !important;">
                            <tbody>
                                <tr>
                                    <td class="align-middle text-left" style="font-size: 1rem !important;">จำนวนพนักงาน:
                                    </td>
                                    <td class="align-middle text-left" style="font-size: 1rem !important;">
                                        {{ $store->staff->count('id') }} คน
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        <a href="#staff_manage_modal" data-toggle="modal" staff-manage data-store-name="{{ $store->store_name }}" data-store-id="{{ $store->id }}"
                            class="btn btn-danger btn-block rounded-pill"><i class="fas fa-male"></i>
                            จัดการพนักงาน</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="modal fade" id="staff_manage_modal" data-backdrop="static" tabindex="-1" role="dialog"
        aria-labelledby="staff_manage_modal" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <form id="staff_form" class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">จัดการพนักงาน</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">

                    <fieldset id="staff_detail">
                        <div class="row">
                            <div class="col-auto mb-3 mt-sm-1">
                                <h4 class="mb-0 font-weight-light">สาขา: <span id="store-name" class="font-weight-bold"></span></h4>
                            </div>
                            <div class="col-auto text-right mb-3 ml-auto">
                                <button type="button" id="btn_add_staff" onclick="goToStaffMenu(this, 'staff_add_edit')" class="btn btn-danger rounded-pill btn-sm">
                                    <i class="fas fa-user-plus"></i> เพิ่มพนักงาน
                                </button>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead class="thead-light" class="thead-light">
                                        <tr>
                                            <th class="text-center align-middle">ลำดับ</th>
                                            <th class="text-center align-middle">ชื่อผู้ใช้</th>
                                            <th class="text-center align-middle">ชื่อ - นามสกุล</th>
                                            <th class="text-center align-middle">สถานะ</th>
                                            <th class="text-center align-middle">ดำเนินการ</th>
                                        </tr>
                                    </thead>
                                    <tbody class="staff_list"></tbody>
                                </table>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset id="staff_add_edit" style="display:none;">
                        <div class="row">
                            @csrf
                            @method('POST')
                            <input type="hidden" id="user_id" name="id">
                            <input type="hidden" name="store_id">
                            <div class="col-md-12 px-3">

                                <div class="form-row">

                                    <div id="username-readonly" class="col-md-6 form-group" style="display: none;">
                                        <label>ชื่อผู้ใช้</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control cls_txt" name="username2"
                                                aria-describedby="basic-addon2" placeholder="กรุณาระบุชื่อผู้ใช้" readonly="">
                                        </div>
                                    </div>
                                    <div id="username-editable" class="col-md-6 form-group">
                                        <label>ชื่อผู้ใช้</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control cls_txt" name="username"
                                                aria-describedby="basic-addon2" placeholder="กรุณาระบุชื่อผู้ใช้" required="">
                                            <div class="input-group-append">
                                                <span class="input-group-text" id="basic-addon2">{{ '@'.$agentUsername }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>รหัสผ่าน</label>
                                        <input type="text" class="form-control cls_txt" name="password"
                                            placeholder="กรุณาระบุรหัสผ่าน" required="">
                                    </div>
                                    <div class="form-group col-md-12 mb-0 none_customer">
                                        <div class="form-group">
                                            <label>ชื่อ - นามสกุล</label>
                                            <input type="text" class="form-control cls_txt" name="full_name"
                                                placeholder="กรุณาระบุชื่อ - นามสกุล">
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4 mb-0 none_customer">
                                        <div class="form-group">
                                            <label>เบอร์โทรศัพท์</label>
                                            <input type="text" class="form-control cls_txt" name="phone"
                                                placeholder="กรุณาระบุเบอร์โทรศัพท์" maxlength="10"
                                                oninput="this.value = this.value.replace(/[^0-9]+/g, '');">
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4 mb-0 none_customer">
                                        <div class="form-group">
                                            <label>ไอดีไลน์</label>
                                            <input type="text" class="form-control cls_txt" name="line"
                                                placeholder="กรุณาระบุรหัสผ่าน">
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4 none_customer_last">
                                        <label>สถานะ</label>
                                        <select class="form-control cls_cbo_stat" name="status" required="">
                                            <option value="2">เครื่องแทง</option>
                                            <option value="1">พนักงาน</option>
                                            <option value="0">ระงับการใช้งาน</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn btn-danger rounded-pill">บันทึก</button>
                                    <button type="button" id="btn_cancel" onclick="goToStaffMenu(this, 'staff_detail')" class="btn btn-secondary rounded-pill">ยกเลิก</button>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset id="staff_menu" style="display:none;">
                        <div class="row">
                            <div class="col-md-12 pl-5 pr-5">
                                <h3>ตั้งค่าเมนู</h3>
                                <div class="row">
                                    <table class="table table-sm tb_staff_menu">
                                        <thead class="thead-light">
                                            <tr>
                                                <th class="text-center align-middle">ลำดับ</th>
                                                <th class="text-center align-middle">เมนู</th>
                                                <th class="text-center align-middle">
                                                    <input type="checkbox"class="custom-control-input" id="check_all">
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="text-center align-middle">1</td>
                                                <td class="text-center align-middle">หน้าร้าน</td>
                                                <td class="text-center align-middle">
                                                    <div class="custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" id="customCheck1"
                                                            checked="">
                                                        <label class="custom-control-label" for="customCheck1"></label>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-center align-middle">2</td>
                                                <td class="text-center align-middle">จัดการ</td>
                                                <td class="text-center align-middle">
                                                    <div class="custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" id="customCheck2"
                                                            checked="">
                                                        <label class="custom-control-label" for="customCheck2"></label>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="text-center">
                                    <button type="button" id="btn_save_memu" class="btn btn-danger rounded-pill">บันทึก</button>
                                    <button type="button" id="btn_cancel_menu" onclick="goToStaffMenu(this, 'staff_detail')"
                                        class="btn btn-secondary rounded-pill">ยกเลิก</button>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark rounded-pill" onclick="goToStaffMenu(this, 'staff_detail')" data-dismiss="modal">ปิด</button>
                </div>
            </form>
        </div>
    </div>
@endsection

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

        let currentStoreId;
        const staffForm = document.forms['staff_form'];

        const phoneCheck = el => {
            el.value = el.value.replace(/[^0-9]+/g, '');
            if (el.value.length < 10) {
                el.classList.add('is-invalid');
            }
        }

        const checkPhoneNumberAvailable = async el => {
            const phoneNumber = el.value;
            if (el.value.length < 10) return;
            if (el.dataset.currentPhoneNumber === el.value) {
                return el.classList.remove('is-invalid');
            }
            tryCatchSwal(async () => {
                const result = await fetchJson(`{{ route('agent.checkAvailablePhoneNumber') }}/${phoneNumber}`);
                if (!result) return false;
                if (result.available) return false;
                el.classList.add('is-invalid');
                swal('เบอร์โทรศัพท์ซ้ำ', 'ขออภัย มีผู้ใช้งานเบอร์โทรศัพท์นี้แล้ว โปรดใช้เบอร์อื่น', 'error');
                return false;
            });
        }
        
        window.fetchStore = id => {
            tryCatchSwal(async () => {
                const result = await fetchJson(`{{ route('staff.index') }}/${id}`);
                if (!result) return false;

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

                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;
                }

                document.forms['edit-form'].action = `{{ route('staff.index') }}/${id}`;
            })
        }

        window.goToStaffMenu = async (This, targetId, id = null) => {
            const form = This.form;
            const thisField = This.closest('fieldset') || false;
            const targetField = form.querySelector(`#${targetId}`);
            if (!id) { // Add staff
                form['_method'].value = 'POST';
                document.getElementById('username-editable').style.display = 'block';
                document.getElementById('username-readonly').style.display = 'none';
                form['username'].disabled = false;
                form['password'].required = true;
                delete form['phone'].dataset.currentPhoneNumber;
            } else { // Edit staff
                form['_method'].value = 'PUT';
                document.getElementById('username-editable').style.display = 'none';
                document.getElementById('username-readonly').style.display = 'block';
                form['username'].disabled = true;
                form['password'].required = false;
                tryCatchSwal(async () => {
                    const result = await fetchJson(`{{ route('staff.index') }}/${currentStoreId}/${id}`);
                    if (!result) return false;
                    form['user_id'].value = result.id;
                    form['username2'].value = result.username;
                    form['full_name'].value = result.name;
                    form['phone'].value = result.phone || '';
                    form['phone'].dataset.currentPhoneNumber = result.phone || '';
                    form['line'].value = result.value || '';
                    for (const el of form.querySelectorAll('option')) {
                        el.selected = el.value == result.status;
                    }
                });
            }
            if (thisField) {
                fadeOut(thisField).then(() => fadeIn(targetField));
            } else {
                fadeIn(targetField);
            }
        }

        staffForm.elements['phone'].addEventListener('blur', e => checkPhoneNumberAvailable(e.target))

        const deleteForm = document.querySelectorAll('[delete-staff]');
        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 false;
                    swal('สำเร็จ', 'ลบข้อมูลพนักงานเรียบร้อย', 'success').then(() => location.reload());
                }, () => switchSubmitBtnState(form));
            });
        }

        /**
         * Document Ready
         */
        document.addEventListener('DOMContentLoaded', () => {
            
            document.body.addEventListener('click', e => {
                if (e.target.closest('[staff-manage]')) {
                    const btn = e.target.closest('[staff-manage]');
                    const storeId = btn.dataset.storeId;
                    const storeName = btn.dataset.storeName;
                    currentStoreId = storeId;
                    staffForm['store_id'].value = storeId;
                    staffForm.querySelector('#store-name').innerText = storeName;
                    tryCatchSwal(async () => {
                        const result = await fetchJson(`{{ route('staff.index') }}/${storeId}`);
                        if (!result) return false;
                        const table = staffForm.querySelector('table');
                        const tbody = table.querySelector('tbody');
                        tbody.innerHTML = '';
                        if (!result.length) {
                            const tr = document.createElement('tr');
                            tr.innerHTML = `<td colspan="6"><h4 class="text-center font-weight-light text-muted mb-0 py-2">ไม่พบรายการ</h4></td>`;
                            tbody.appendChild(tr);
                            return;
                        }

                        let n = 0;
                        for (const item of result) {
                            n++;
                            const status = {
                                text: item.status === 1 ? 'พนักงาน' : (item.status === 2 ? 'เครื่องแทง' : 'ปิดใช้งาน'),
                                color: item.status === 1 ? 'primary' : (item.status === 2 ? 'info' : 'danger'),
                            };
                            const tr = document.createElement('tr');
                            tr.innerHTML = 
                                `<td class="align-middle text-center">${n}</td>
                                <td class="align-middle text-center">${item.username}</td>
                                <td class="align-middle text-center">${item.name}</td>
                                <td class="align-middle text-center">
                                    <span class="badge text-xs badge-${status.color}">${status.text}</span>
                                </td>
                                <td class="align-middle text-center">
                                    <button type="button" class="btn btn-sm btn-warning" title="แก้ไข" onclick="goToStaffMenu(this, 'staff_add_edit', ${item.id})">
                                        แก้ไข
                                    </button>
                                    <form delete-staff action="{{ route('staff.index') }}/${currentStoreId}/${item.id}" onsubmit="this.preventDefault() && deleteStore(this)"
                                        method="post" class="d-inline-block">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" data-id="${item.id}" title="ลบ">
                                            ลบ
                                        </button>
                                    </form>
                                </td>`;
                            tbody.appendChild(tr);
                        }
                    });
                }

                if (e.target.closest('[delete-staff]')) {
                    const form = e.target.closest('[delete-staff]');
                    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 false;
                            swal('สำเร็จ', 'ลบข้อมูลพนักงานเรียบร้อย', 'success').then(() => location.reload());
                        }, () => switchSubmitBtnState(form));
                    });
                }
            });

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

                const formData = new FormData(staffForm);
                tryCatchSwal(async () => {
                    switchSubmitBtnState(staffForm);
                    let url = `{{ route('staff.index') }}/${currentStoreId}`;
                    if (staffForm['_method'].value === 'PUT') {
                        url = url + `/${staffForm['user_id'].value}`;
                    }
                    const result = await fetchJson(url, 'POST', formData);
                    if (!result) return false;
                    swal('สำเร็จ', 'ดำเนินการเรียบร้อย', 'success').then(() => location.reload());
                }, () => switchSubmitBtnState(staffForm));
            });

        });

        window.addEventListener('load', () => {
            
            if (params.get('storeId')) {
                document.querySelector(`a[data-store-id="${params.get('storeId')}"]`).click()
            }

        });

    </script>
@endsection