{{--
    Shared create/edit form for the Branch module. `$branch` is null when
    creating, and the model instance when editing — every input uses
    old('field', $branch->field ?? '') so validation errors re-populate
    correctly in both modes.
--}}
<form id="branch-form"
    action="{{ isset($branch) ? route('branch.update', $branch->id) : route('branch.store') }}"
    method="POST">
    @csrf

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="code">Branch Code</label>
                <input type="text" name="code" id="code" class="form-control" maxlength="50"
                    value="{{ old('code', $branch->code ?? '') }}">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="name">Branch Name <span class="text-danger">*</span></label>
                <input type="text" name="name" id="name" class="form-control" maxlength="255"
                    value="{{ old('name', $branch->name ?? '') }}" required>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="address">Address</label>
                <textarea name="address" id="address" class="form-control" rows="2">{{ old('address', $branch->address ?? '') }}</textarea>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="city">City</label>
                <input type="text" name="city" id="city" class="form-control" maxlength="255"
                    value="{{ old('city', $branch->city ?? '') }}">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="state">State</label>
                <input type="text" name="state" id="state" class="form-control" maxlength="255"
                    value="{{ old('state', $branch->state ?? '') }}">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="postcode">Postcode</label>
                <input type="text" name="postcode" id="postcode" class="form-control" maxlength="10"
                    value="{{ old('postcode', $branch->postcode ?? '') }}">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="phone">Phone</label>
                <input type="text" name="phone" id="phone" class="form-control" maxlength="30"
                    value="{{ old('phone', $branch->phone ?? '') }}">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="operating_hours_start">Operating Hours</label>
                <div class="d-flex align-items-center" style="gap: 8px;">
                    <input type="time" id="operating_hours_start" class="form-control">
                    <span>to</span>
                    <input type="time" id="operating_hours_end" class="form-control">
                </div>
                <input type="hidden" name="operating_hours" id="operating_hours"
                    value="{{ old('operating_hours', $branch->operating_hours ?? '') }}">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group form-check">
                <input type="checkbox" name="is_active" id="is_active" class="form-check-input" value="1"
                    {{ old('is_active', $branch->is_active ?? true) ? 'checked' : '' }}>
                <label for="is_active" class="form-check-label">Active branch</label>
            </div>
        </div>
    </div>

    <div class="d-flex" style="gap: 10px;">
        <button type="submit" class="btn btn-primary px-30">{{ isset($branch) ? 'Save Changes' : 'Save' }}</button>
        <a href="{{ route('branch.index') }}" class="btn btn-light px-30">Cancel</a>
    </div>
</form>

<script>
    (function() {
        // Syncs the two time-range pickers into the single `operating_hours`
        // text value the backend stores (e.g. "9:00 AM - 6:00 PM"), and does
        // the reverse on load so an existing/old value re-populates the pickers.
        var startInput = document.getElementById('operating_hours_start');
        var endInput = document.getElementById('operating_hours_end');
        var hiddenInput = document.getElementById('operating_hours');

        function to24Hour(hour, minute, meridiem) {
            hour = parseInt(hour, 10);
            if (meridiem) {
                meridiem = meridiem.toUpperCase();
                if (meridiem === 'PM' && hour !== 12) hour += 12;
                if (meridiem === 'AM' && hour === 12) hour = 0;
            }
            return String(hour).padStart(2, '0') + ':' + minute;
        }

        function to12Hour(value) {
            if (!value) return null;
            var parts = value.split(':');
            var hour = parseInt(parts[0], 10);
            var minute = parts[1];
            var meridiem = hour >= 12 ? 'PM' : 'AM';
            var displayHour = hour % 12;
            if (displayHour === 0) displayHour = 12;
            return displayHour + ':' + minute + ' ' + meridiem;
        }

        function parseExistingValue(value) {
            if (!value) return;
            var matches = value.match(/(\d{1,2}):(\d{2})\s*([AaPp][Mm])?/g);
            if (!matches || matches.length < 2) return;

            var timeRegex = /(\d{1,2}):(\d{2})\s*([AaPp][Mm])?/;
            [startInput, endInput].forEach(function(input, index) {
                var match = matches[index].match(timeRegex);
                if (match) {
                    input.value = to24Hour(match[1], match[2], match[3]);
                }
            });
        }

        function syncHiddenInput() {
            var start = to12Hour(startInput.value);
            var end = to12Hour(endInput.value);

            if (start && end) {
                hiddenInput.value = start + ' - ' + end;
            } else if (!start && !end) {
                // Leave any pre-existing free-text value untouched when both
                // pickers are empty (e.g. legacy data that couldn't be parsed).
            } else {
                hiddenInput.value = start || end || '';
            }
        }

        parseExistingValue(hiddenInput.value);
        startInput.addEventListener('change', syncHiddenInput);
        endInput.addEventListener('change', syncHiddenInput);
    })();
</script>