@extends('layouts.master')

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-wrap flex-stack pb-7">
                <div class="d-flex flex-wrap align-items-center my-1">
                    <h3 class="fw-bold me-5 my-1">Disputes <span class="text-muted">Edit</span>
                    </h3>
                    <h3 class="fw-bold me-5 my-1"></h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="kt_ecommerce_settings_edit" role="tabpanel">
                            <form id="kt_ecommerce_settings_edit_form" class="form"
                                action="{{ route('Disputes.update') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="CARRIER_ID" value="{{ $carrierId }}">
                                <input type="hidden" name="TICKET_ID" value="{{ $disputes->TICKET_ID }}">
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">CATEGORY</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="w-100">
                                            <select class="form-select form-select-solid" name="DEPT" id="DEPT"
                                                data-control="select2" data-hide-search="true"
                                                data-placeholder="Select Category">
                                                <option value="">Select Category</option>
                                                <option value="Card Not Working"
                                                    {{ old('DEPT') == 'Card Not Working' ? 'selected' : ($disputes->DEPT == 'Card Not Working' ? 'selected' : '') }}>
                                                    Card Not Working</option>
                                                <option value="General Question"
                                                    {{ old('DEPT') == 'General Question' ? 'selected' : ($disputes->DEPT == 'General Question' ? 'selected' : '') }}>
                                                    General Question</option>
                                                <option value="Order Cards"
                                                    {{ old('DEPT') == 'Order Cards' ? 'selected' : ($disputes->DEPT == 'Order Cards' ? 'selected' : '') }}>
                                                    Order Cards</option>
                                                <option value="Fraud"
                                                    {{ old('DEPT') == 'Fraud' ? 'selected' : ($disputes->DEPT == 'Fraud' ? 'selected' : '') }}>
                                                    Fraud</option>
                                                <option value="Dispute charge"
                                                    {{ old('DEPT') == 'Dispute charge' ? 'selected' : ($disputes->DEPT == 'Dispute charge' ? 'selected' : '') }}>
                                                    Dispute charge</option>
                                            </select>
                                            @error('DEPT')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">SUBJECT</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid" name="TITLE"
                                            id="TITLE" value="{{ old('MESSAGE', $disputes->TITLE) }}"
                                            placeholder="SUBJECT">
                                        @if ($errors->has('TITLE'))
                                            <span class="text-danger">{{ $errors->first('TITLE') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">SUMMARY</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid" name="MESSAGE"
                                            id="MESSAGE" value="{{ old('MESSAGE', $disputes->MESSAGE) }}"
                                            placeholder="SUMMARY">
                                        @if ($errors->has('MESSAGE'))
                                            <span class="text-danger">{{ $errors->first('MESSAGE') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">STATUS</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <select name="STATUS" id="STATUS"
                                        class="form-select form-select-solid"
                                            data-control="select2" data-hide-search="true" data-placeholder="Select Status">
                                            <option value="">Select Status</option>
                                            <option value="NEW"
                                                {{ old('STATUS') == 'NEW' ? 'selected' : ($disputes->STATUS == 'NEW' ? 'selected' : '') }}>
                                                NEW</option>
                                            <option value="INPROCESS"
                                                {{ old('STATUS') == 'INPROCESS' ? 'selected' : ($disputes->STATUS == 'INPROCESS' ? 'selected' : '') }}>
                                                INPROCESS</option>
                                            <option value="COMPLETED"
                                                {{ old('STATUS') == 'COMPLETED' ? 'selected' : ($disputes->STATUS == 'COMPLETED' ? 'selected' : '') }}>
                                                COMPLETED</option>
                                        </select>
                                        @if ($errors->has('STATUS'))
                                            <span class="text-danger">{{ $errors->first('STATUS') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="">UPLOAD PHOTO</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="file" class="form-control form-control-solid" name="DOCUMENTS"
                                            value="" placeholder="DOCUMENTS" />
                                        @if ($disputes->DOCUMENTS)
                                            <p>
                                                <a href="{{ asset('documents/' . $disputes->DOCUMENTS) }}"
                                                    download>{{ $disputes->DOCUMENTS }}</a>
                                            </p>
                                        @endif
                                        @error('DOCUMENTS')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row py-5">
                                    <div class="col-md-9 offset-md-3">
                                        <div class="d-flex">
                                            @if(!empty($carrierId))
                                                <a href="{{ route('carrierProfile.edit', $carrierId) }}#kt_stats_widget_16_tab_19" class="btn btn-light me-2" id="cancel" onclick="showSpinnerCancelBtn();">Cancel</a>
                                            @else
                                                <a href="{{ route('Disputes.mainIndex') }}" class="btn btn-light me-2">Cancel</a>
                                            @endif
                                            <button type="submit" data-kt-ecommerce-settings-type="submit"
                                                class="btn btn-primary" id="submit" onclick="showSpinner();">
                                                <span class="indicator-label">Update</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
<script>
    function showSpinner() {
        var submitButton = document.getElementById('submit');
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm align-middle ms-2"></span>';
    }

    function showSpinnerCancelBtn() {
            var cancelButton = document.getElementById('cancel');
            cancelButton.innerHTML = '<span class="spinner-border spinner-border-sm align-middle ms-2"></span>';
        }
</script>
@endsection