@extends('layouts.app')

@section('title')
    {{ __('Tạo lệnh rút tiền') }}
@endsection

@section('withdraw')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2 align-items-center">
                <div class="col-sm-6">
                    <h1 class="mb-0">{{ __('withdraw') }}</h1>
                    <small class="text-muted">{{ __('Tạo lệnh rút tiền về tài khoản ngân hàng') }}</small>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('app.withdraw.index') }}">{{ __('withdraw') }}</a>
                        </li>
                        <li class="breadcrumb-item active">{{ __('withdrawal_request') }}</li>
                    </ol>
                </div>
            </div>
            <hr>
        </div>
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="container-fluid">

            @if (Session::has('success'))
                <div id="message-alert" class="alert alert-success alert-dismissible fade show">
                    {{ Session::get('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span>&times;</span>
                    </button>
                </div>
            @endif

            @if (Session::has('error'))
                <div id="message-alert" class="alert alert-danger alert-dismissible fade show">
                    {{ Session::get('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span>&times;</span>
                    </button>
                </div>
            @endif

            <div id="loading-overlay" class="overlay d-none">
                <div class="loading-box text-center">
                    <div class="spinner-border text-light" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <div class="loading-text mt-3">{{ __('Đang tạo lệnh rút tiền, vui lòng chờ...') }}</div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 @if (!auth()->user()->view_template_withdraw_account == true) mx-auto @endif">

                    {{-- FORM TẠO LỆNH RÚT --}}
                    <div class="card card-primary card-outline shadow-sm">
                        <div class="card-header border-0">
                            <h3 class="card-title font-weight-bold mb-0">
                                {{ __('withdrawal_request') }}
                            </h3>
                        </div>

                        <div class="card-body">
                            <form class="row" action="{{ route('app.withdraw.store') }}" method="POST"
                                id="withdraw-form">
                                @csrf

                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="withdraw_amount" class="font-weight-semibold">
                                            {{ __('amount_want_to_withdraw') }} <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fas fa-money-bill-wave mr-1"></i> VNĐ
                                                </span>
                                            </div>
                                            <input type="number" class="form-control @error('amount') is-invalid @enderror"
                                                name="amount" id="withdraw_amount" value="{{ old('amount') }}"
                                                placeholder="{{ __('amount_want_to_withdraw') }}">
                                        </div>
                                        @error('amount')
                                            <span class="text-danger d-block mt-1">* {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="withdraw_bank_name" class="font-weight-semibold">
                                            {{ __('bank_name') }} <span class="text-danger">*</span>
                                        </label>
                                        <select name="bank_name" id="withdraw_bank_name"
                                            class="form-control select2 @error('bank_name') is-invalid @enderror"
                                            data-placeholder="{{ __('select_bank_name') }}">
                                            <option value="">{{ __('select_bank_name') }}</option>
                                            @foreach (config('bank') as $bank)
                                                <option value="{{ $bank['bank_code'] }}"
                                                    @if (old('bank_name') == $bank['bank_code']) selected @endif>
                                                    {{ $bank['bank_name'] }} ({{ $bank['display_name'] }})
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('bank_name')
                                            <span class="text-danger d-block mt-1">* {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="withdraw_bank_account" class="font-weight-semibold">
                                            {{ __('bank_account') }} <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fas fa-university"></i>
                                                </span>
                                            </div>
                                            <input type="text"
                                                class="form-control @error('bank_account') is-invalid @enderror"
                                                name="bank_account" id="withdraw_bank_account"
                                                placeholder="{{ __('insert_bank_account') }}"
                                                value="{{ old('bank_account') }}">
                                        </div>
                                        @error('bank_account')
                                            <span class="text-danger d-block mt-1">* {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="withdraw_customer_name" class="font-weight-semibold">
                                            {{ __('customer_name') }} <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fas fa-user"></i>
                                                </span>
                                            </div>
                                            <input type="text"
                                                class="form-control @error('customer_name') is-invalid @enderror"
                                                name="customer_name" id="withdraw_customer_name"
                                                value="{{ old('customer_name') }}"
                                                placeholder="{{ __('insert_customer_name') }}">
                                        </div>
                                        @error('customer_name')
                                            <span class="text-danger d-block mt-1">* {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                {{-- THÊM Ô NỘI DUNG RÚT --}}
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="withdraw_content" class="font-weight-semibold">
                                            {{ __('Nội dung rút') }} <span class="text-danger">*</span>
                                        </label>
                                        <small class="text-danger">{{ __('Vui lòng nhập nội dung không dấu') }}</small>
                                        <textarea class="form-control @error('content') is-invalid @enderror" name="content" id="withdraw_content"
                                            rows="3" placeholder="{{ __('Nhập nội dung rút tiền...') }}">{{ old('content', '') }}</textarea>
                                        @error('content')
                                            <span class="text-danger d-block mt-1">* {{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                @if (auth()->user()->is_2fa_enabled)
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="one_time_password" class="font-weight-semibold">
                                                {{ __('enter_the_2fa_authentication_code') }}
                                            </label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-shield-alt"></i>
                                                    </span>
                                                </div>
                                                <input type="text"
                                                    class="form-control @error('one_time_password') is-invalid @enderror"
                                                    name="one_time_password" id="one_time_password" value=""
                                                    placeholder="{{ __('enter_the_authentication_otp_code') }}">
                                            </div>
                                            @error('one_time_password')
                                                <span class="text-danger d-block mt-1">* {{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                @endif

                                <div class="col-lg-12 mt-2">
                                    <div class="d-flex justify-content-center">
                                        <button class="btn btn-success btn-lg px-4" id="btn-submit" type="submit">
                                            <i class="fas fa-paper-plane mr-1"></i> {{ __('submit') }}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- Form them tai khoan mau da chuyen sang trang rieng, xem route
                         app.withdraw.accounts. De o day thi doi tac khong co quyen tao
                         lenh rut se khong bao gio vao duoc de them tai khoan. --}}
                    @if (canSeeMenu('withdraw_template_withdraw_account', []))
                        <div class="text-center mb-3">
                            <a href="{{ route('app.withdraw.accounts') }}" class="btn btn-outline-info btn-sm">
                                <i class="fas fa-address-book mr-1"></i> {{ __('Quản lý tài khoản rút mẫu') }}
                            </a>
                        </div>
                    @endif
                </div>

                @if (auth()->user()->view_template_withdraw_account)
                    <div class="col-lg-6">
                        <div class="card card-secondary card-outline shadow-sm">
                            <div class="card-header border-0">
                                <h3 class="card-title font-weight-bold mb-0">
                                    {{ __('list_template_withdraw_account') }}
                                </h3>
                            </div>

                            <div class="card-body">
                                @if ($lists->count())
                                    <div class="template-account-list">
                                        @foreach ($lists as $list)
                                            <div class="template-account-item mb-3">
                                                <div class="template-account-card list-template-withdraw-account"
                                                    data-account-info='@json($list)'>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div class="template-info">
                                                            <div class="template-name">
                                                                <i class="fas fa-user mr-1 text-primary"></i>{{ $list->customer_name }}
                                                            </div>
                                                            <div class="template-bank">
                                                                <i class="fas fa-university mr-1"></i>{{ $list->bank_name }}
                                                            </div>
                                                            <div class="template-account-no">
                                                                <i class="fas fa-hashtag mr-1"></i>{{ $list->bank_account }}
                                                            </div>
                                                        </div>
                                                        <span class="btn btn-sm btn-primary template-select-btn">
                                                            <i class="fas fa-hand-pointer mr-1"></i>{{ __('Chọn') }}
                                                        </span>
                                                    </div>
                                                </div>

                                                <form
                                                    action="{{ route('app.withdraw.deleteAccount', ['id' => $list->id]) }}"
                                                    method="POST" class="mt-2 text-right template-delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="button"
                                                        class="btn btn-sm btn-outline-danger btn-delete-template">
                                                        <i class="fas fa-trash-alt mr-1"></i> {{ __('Xoá') }}
                                                    </button>
                                                </form>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="text-center text-muted py-4">
                                        <i class="far fa-folder-open fa-2x mb-2"></i>
                                        <p class="mb-0">{{ __('Chưa có tài khoản nào được thêm.') }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2({
                theme: 'bootstrap4',
                width: '100%'
            });
        });

        $(document).on('click', '.list-template-withdraw-account', function() {
            const accountInfo = $(this).data('account-info');

            $('#withdraw_bank_account').val(accountInfo.bank_account ?? '');
            $('#withdraw_customer_name').val(accountInfo.customer_name ?? '');

            if (accountInfo.bank_code) {
                $('#withdraw_bank_name').val(accountInfo.bank_code).trigger('change');
            }
        });

        // Xác nhận trước khi xoá tài khoản mẫu
        $(document).on('click', '.btn-delete-template', function() {
            const $form = $(this).closest('form');
            Swal.fire({
                title: {{ \Illuminate\Support\Js::from(__('Xoá tài khoản mẫu?')) }},
                html: {{ \Illuminate\Support\Js::from(__('Bạn có chắc chắn muốn xoá tài khoản rút mẫu này không?')) }},
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: {{ \Illuminate\Support\Js::from(__('Xoá')) }},
                cancelButtonText: {{ \Illuminate\Support\Js::from(__('Huỷ')) }},
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                allowOutsideClick: false,
            }).then((result) => {
                if (result.isConfirmed) {
                    $form.submit();
                }
            });
        });

        let isSubmitting = false;

        $('#btn-submit').on('click', function(event) {
            event.preventDefault();

            if (isSubmitting) {
                return;
            }

            createForm();
        });

        function lockSubmitButton() {
            isSubmitting = true;
            $('#btn-submit')
                .prop('disabled', true)
                .html('<i class="fas fa-spinner fa-spin mr-1"></i> ' + {{ \Illuminate\Support\Js::from(__('Đang xử lý...')) }});
        }

        function unlockSubmitButton() {
            isSubmitting = false;
            $('#btn-submit')
                .prop('disabled', false)
                .html('<i class="fas fa-paper-plane mr-1"></i> {{ __('submit') }}');
        }

        function createForm() {
            Swal.fire({
                title: {{ \Illuminate\Support\Js::from(__('Xác nhận lệnh rút tiền?')) }},
                html: {{ \Illuminate\Support\Js::from(__('Bạn có chắc chắn muốn tạo lệnh rút tiền này?')) }},
                icon: "question",
                showCancelButton: true,
                confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý')) }},
                cancelButtonText: {{ \Illuminate\Support\Js::from(__('Hủy')) }},
                allowOutsideClick: false,
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                lockSubmitButton();
                $('#loading-overlay').removeClass('d-none');

                const form = document.getElementById('withdraw-form');

                $.ajax({
                    url: form.action,
                    type: 'POST',
                    data: $(form).serialize(),
                    dataType: 'json',
                    success: function(data) {
                        $('#loading-overlay').addClass('d-none');

                        if (data.code == 1) {
                            toastr.success(data.msg || {{ \Illuminate\Support\Js::from(__('Tạo lệnh rút thành công')) }});

                            // Giữ nguyên disabled để tránh bấm lại trước khi redirect
                            window.location.href = "/withdraw";
                        } else {
                            unlockSubmitButton();
                            toastr.error(data.msg || {{ \Illuminate\Support\Js::from(__('Tạo lệnh rút thất bại')) }});
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#loading-overlay').addClass('d-none');
                        unlockSubmitButton();

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            toastr.error(xhr.responseJSON.message);
                        } else {
                            toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                        }
                    }
                });
            });
        }
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">

    <style>
        .card {
            border-radius: 12px;
        }

        .card-header {
            background: #fff;
            border-bottom: 1px solid #f1f1f1;
            padding: 1rem 1.25rem;
        }

        .card-title {
            font-size: 1.05rem;
        }

        .form-group label {
            margin-bottom: .45rem;
            color: #2c3e50;
        }

        .form-control,
        .input-group-text,
        .select2-container--bootstrap4 .select2-selection {
            border-radius: 8px !important;
        }

        .input-group-text {
            min-width: 48px;
            justify-content: center;
        }

        .select2-container .select2-selection--single {
            height: 38px !important;
            display: flex !important;
            align-items: center !important;
        }

        .select2-container--bootstrap4 .select2-selection__rendered {
            line-height: 36px !important;
        }

        .select2-container--bootstrap4 .select2-selection__arrow {
            height: 36px !important;
        }

        #loading-overlay {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 9999;
        }

        .loading-box {
            background: rgba(255, 255, 255, 0.08);
            padding: 24px 32px;
            border-radius: 14px;
            backdrop-filter: blur(3px);
        }

        #loading-overlay .spinner-border {
            width: 4rem;
            height: 4rem;
        }

        #loading-overlay .loading-text {
            font-size: 16px;
            color: #fff;
            font-weight: 500;
        }

        .template-account-card {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 14px 16px;
            transition: all .2s ease;
            background: #fff;
            cursor: pointer;
        }

        .template-account-card:hover {
            border-color: #007bff;
            box-shadow: 0 8px 20px rgba(0, 123, 255, 0.08);
            transform: translateY(-1px);
        }

        .template-name {
            font-weight: 700;
            font-size: 15px;
            color: #1f2d3d;
            margin-bottom: 6px;
        }

        .template-bank {
            display: inline-block;
            font-weight: 600;
            font-size: 13.5px;
            color: #0b5ed7;
            background: #e7f1ff;
            border: 1px solid #cfe2ff;
            border-radius: 6px;
            padding: 2px 10px;
            margin-bottom: 6px;
        }

        .template-account-no {
            font-size: 14px;
            color: #2c3e50;
            font-weight: 600;
            letter-spacing: .3px;
            word-break: break-all;
        }

        .template-select-btn {
            flex: 0 0 auto;
            margin-left: 12px;
            pointer-events: none;
        }

        .btn-success,
        .btn-info {
            border-radius: 10px;
            font-weight: 600;
        }

        textarea.form-control {
            resize: vertical;
            min-height: 92px;
        }

        @media (max-width: 767.98px) {
            .content-header h1 {
                font-size: 1.4rem;
            }

            .card-body {
                padding: 1rem;
            }
        }
    </style>
@endsection