@extends('layouts.app')

@section('content')


<div class="page-wrapper">
    <div class="page-content">

        <!-- Breadcrumb -->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item">
                        <a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('settings.view') }}">Settings</a>
                    </li>
                    <li class="breadcrumb-item active">
                        Partner Settings
                    </li>
                </ol>
            </div>
        </div>

        <hr />

        <div class="card">
            <div class="card-body">
                <h5 class="mb-3"><i class="bx bx-user-check me-1"></i> Partner Settings</h5>

                @if(session('success'))
                    <div class="alert alert-success border-0 bg-success alert-dismissible fade show py-2">
                        <div class="d-flex align-items-center">
                            <div class="font-35 text-white"><i class="bx bxs-check-circle"></i></div>
                            <div class="ms-3">
                                <h6 class="mb-0 text-white">Success</h6>
                                <div class="text-white small">{{ session('success') }}</div>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <form action="{{ route('settings.partner.update') }}" method="POST">
                    @csrf

                    <div class="row g-3 mb-4">
                        <!-- Skip KYC -->
                        <div class="col-md-6 col-xl-4">
                            <div class="general-field-card">
                                <label class="form-label fw-semibold">Skip KYC</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light-primary text-primary">
                                        <i class="bx bx-id-card"></i>
                                    </span>
                                    <select
                                        name="kyc_skip"
                                        class="form-select @error('kyc_skip') is-invalid @enderror"
                                    >
                                        <option value="">Select</option>
                                        <option value="1" {{ old('kyc_skip', $partner['kyc_skip']) === '1' ? 'selected' : '' }}>Yes</option>
                                        <option value="0" {{ old('kyc_skip', $partner['kyc_skip']) === '0' ? 'selected' : '' }}>No</option>
                                    </select>
                                    @error('kyc_skip')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted mt-2 d-block">Skip KYC during partner registration.</small>
                            </div>
                        </div>
                    </div>

                    <!-- Section: Video KYC Slot Setting -->
                    <h6 class="mb-3">Video KYC Slot Setting</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6 col-xl-4">
                            <div class="general-field-card">
                                <label for="video_kyc_slot_duration" class="form-label fw-semibold">Slot Time in Minute</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-time-five"></i></span>
                                    <input
                                        type="number"
                                        min="1"
                                        id="video_kyc_slot_duration"
                                        name="video_kyc_slot_duration"
                                        class="form-control @error('video_kyc_slot_duration') is-invalid @enderror"
                                        value="{{ old('video_kyc_slot_duration', $partner['video_kyc_slot_duration']) }}"
                                        placeholder="Enter duration in minutes"
                                    >
                                    @error('video_kyc_slot_duration')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted d-block mt-2">Duration of each video KYC slot in minutes.</small>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-4">
                            <div class="general-field-card">
                                <label for="video_kyc_include_super_admin" class="form-label fw-semibold">Super Admin Conduct Video KYC?</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-user"></i></span>
                                    <select
                                        id="video_kyc_include_super_admin"
                                        name="video_kyc_include_super_admin"
                                        class="form-select @error('video_kyc_include_super_admin') is-invalid @enderror"
                                    >
                                        <option value="1" {{ old('video_kyc_include_super_admin', $partner['video_kyc_include_super_admin']) === '1' ? 'selected' : '' }}>Yes</option>
                                        <option value="0" {{ old('video_kyc_include_super_admin', $partner['video_kyc_include_super_admin']) === '0' ? 'selected' : '' }}>No</option>
                                    </select>
                                    @error('video_kyc_include_super_admin')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted d-block mt-2">Should Super Admins be assigned Video KYC meetings?</small>
                            </div>
                        </div>
                    </div>

                    <!-- Section: Video KYC Meeting Working Hr. -->
                    <div class="d-flex align-items-center justify-content-between mt-4 mb-3 border-bottom pb-2">
                        <h6 class="mb-0">Video KYC Meeting Working Hr.</h6>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="toggle_all_days">
                            <label class="form-check-label fw-semibold text-secondary small" for="toggle_all_days">Toggle All Days</label>
                        </div>
                    </div>

                    <div class="row g-3">
                        @php
                            $days = [
                                'monday' => 'Monday',
                                'tuesday' => 'Tuesday',
                                'wednesday' => 'Wednesday',
                                'thursday' => 'Thursday',
                                'friday' => 'Friday',
                                'saturday' => 'Saturday',
                                'sunday' => 'Sunday'
                            ];
                        @endphp

                        @foreach($days as $key => $label)
                            @php
                                $dayData = $partner['video_kyc_working_hours'][$key] ?? ['status' => '0', 'from' => '', 'to' => ''];
                                $isDayActive = old("video_kyc_working_hours.{$key}.status", $dayData['status']) == '1';
                                $fromTime = old("video_kyc_working_hours.{$key}.from", $dayData['from']);
                                $toTime = old("video_kyc_working_hours.{$key}.to", $dayData['to']);
                            @endphp
                            <div class="col-md-6 col-xl-4 col-xxl-3">
                                <div class="general-field-card shadow-sm border">
                                    <div class="d-flex align-items-center justify-content-between mb-3 border-bottom pb-2">
                                        <span class="fw-bold text-primary">{{ $label }}</span>
                                        <div class="form-check form-switch mb-0">
                                            <input 
                                                class="form-check-input day-status-toggle" 
                                                type="checkbox" 
                                                role="switch" 
                                                name="video_kyc_working_hours[{{ $key }}][status]" 
                                                id="status_{{ $key }}"
                                                value="1"
                                                {{ $isDayActive ? 'checked' : '' }}
                                                data-day="{{ $key }}"
                                            >
                                        </div>
                                    </div>

                                    <div class="mb-2">
                                        <label class="form-label small fw-semibold">From Time</label>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text bg-white"><i class="bx bx-time"></i></span>
                                            <input 
                                                type="time" 
                                                name="video_kyc_working_hours[{{ $key }}][from]" 
                                                id="from_{{ $key }}"
                                                class="form-control day-time-input @error("video_kyc_working_hours.{$key}.from") is-invalid @enderror"
                                                value="{{ $fromTime }}"
                                                {{ !$isDayActive ? 'disabled' : '' }}
                                            >
                                            @error("video_kyc_working_hours.{$key}.from")
                                                <div class="invalid-feedback text-danger d-block mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div>
                                        <label class="form-label small fw-semibold">To Time</label>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text bg-white"><i class="bx bx-time"></i></span>
                                            <input 
                                                type="time" 
                                                name="video_kyc_working_hours[{{ $key }}][to]" 
                                                id="to_{{ $key }}"
                                                class="form-control day-time-input @error("video_kyc_working_hours.{$key}.to") is-invalid @enderror"
                                                value="{{ $toTime }}"
                                                {{ !$isDayActive ? 'disabled' : '' }}
                                            >
                                            @error("video_kyc_working_hours.{$key}.to")
                                                <div class="invalid-feedback text-danger d-block mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Buttons -->
                    <div class="mt-4 d-flex flex-wrap gap-2">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bx bx-save me-1"></i> Save Changes
                        </button>

                        <a href="{{ route('settings.view') }}" class="btn btn-light px-4">
                            <i class="bx bx-arrow-back me-1"></i> Back
                        </a>
                    </div>

                </form>

            </div>
        </div>

    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const dayToggles = document.querySelectorAll('.day-status-toggle');
        const masterToggle = document.getElementById('toggle_all_days');

        // Function to update single day input states
        function updateDayInputs(toggle) {
            const day = toggle.getAttribute('data-day');
            const fromInput = document.getElementById('from_' + day);
            const toInput = document.getElementById('to_' + day);
            
            if (toggle.checked) {
                fromInput.removeAttribute('disabled');
                toInput.removeAttribute('disabled');
            } else {
                fromInput.setAttribute('disabled', 'disabled');
                fromInput.value = '';
                toInput.setAttribute('disabled', 'disabled');
                toInput.value = '';
            }
        }

        // Attach event listeners to all day status toggles
        dayToggles.forEach(function (toggle) {
            toggle.addEventListener('change', function () {
                updateDayInputs(this);
                updateMasterToggleState();
            });
        });

        // Master toggle change handler
        masterToggle.addEventListener('change', function () {
            const isChecked = this.checked;
            dayToggles.forEach(function (toggle) {
                toggle.checked = isChecked;
                updateDayInputs(toggle);
            });
        });

        // Keep master toggle state in sync with sub-toggles
        function updateMasterToggleState() {
            const total = dayToggles.length;
            const checked = document.querySelectorAll('.day-status-toggle:checked').length;
            
            if (checked === total) {
                masterToggle.checked = true;
                masterToggle.indeterminate = false;
            } else if (checked === 0) {
                masterToggle.checked = false;
                masterToggle.indeterminate = false;
            } else {
                masterToggle.checked = false;
                masterToggle.indeterminate = true;
            }
        }

        // Run on initial load
        updateMasterToggleState();
    });
</script>
@endsection