@extends('layouts.app')

@section('title', 'Coop Details Management')


@section('nav-header')

<div class="iq-navbar-header" style="height: 215px;">
                <div class="container-fluid iq-container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="flex-wrap d-flex justify-content-between align-items-center">
                                <div>
                                    <h1>Update Co-op Details</h1>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="iq-header-img">
                    <img src="../assets/images/dashboard/top-header.png" alt="header"
                        class="theme-color-default-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header1.png" alt="header"
                        class="theme-color-purple-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header2.png" alt="header"
                        class="theme-color-blue-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header3.png" alt="header"
                        class="theme-color-green-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header4.png" alt="header"
                        class="theme-color-yellow-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header5.png" alt="header"
                        class="theme-color-pink-img img-fluid w-100 h-100 animated-scaleX">
                </div>
            </div> <!-- Nav Header Component End -->
            <!--Nav End-->

@endsection



@section('content')

<!-- Table -->
        <div class="conatiner-fluid content-inner mt-n5 py-0">
            <div class="card">
                <div class="card-body">


                    <form id="coopDetailsForm">
    @csrf
    <div class="row">
        <div class="col-6">
            <label class="form-label">Co-op Name</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="coop_name" name="coop_name"
                    placeholder="Co-op Name" value="{{ $details->coop_name ?? '' }}" required>
            </div>
        </div>
        <div class="col-6">
            <label class="form-label">Registration Number</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="coop_registration_number" name="coop_registration_number"
                    placeholder="Registration Number" value="{{ $details->coop_registration_number ?? '' }}">
            </div>
        </div>
        <div class="col-12">
            <label class="form-label">Address</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="coop_address" name="coop_address"
                    placeholder="Address" value="{{ $details->coop_address ?? '' }}">
            </div>
        </div>
        <div class="col-4">
            <label class="form-label">Phone Number</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="coop_phone_number" name="coop_phone_number"
                    placeholder="Phone Number" value="{{ $details->coop_phone_number ?? '' }}">
            </div>
        </div>
        <div class="col-4">
            <label class="form-label">Email</label>
            <div class="input-group mb-3">
                <input type="email" class="form-control" id="coop_email" name="coop_email"
                    placeholder="Email" value="{{ $details->coop_email ?? '' }}">
            </div>
        </div>
        <div class="col-4">
            <label class="form-label">Website</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="coop_website" name="coop_website"
                    placeholder="text" value="{{ $details->coop_website ?? '' }}">
            </div>
        </div>
    </div>
    <div class="form-group mt-2 col-12">
        <button type="submit" class="btn btn-primary">Update</button>
    </div>
</form>





                </div>
            </div>


            



        </div>
@endsection

@section('scripts')
<script>
    document.getElementById('coopDetailsForm').addEventListener('submit', function (e) {
        e.preventDefault();

        const payload = {
            coop_name: document.getElementById('coop_name').value,
            coop_registration_number: document.getElementById('coop_registration_number').value,
            coop_address: document.getElementById('coop_address').value,
            coop_phone_number: document.getElementById('coop_phone_number').value,
            coop_email: document.getElementById('coop_email').value,
            coop_website: document.getElementById('coop_website').value,
        };

        fetch("{{ route('coop_details.update') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify(payload)
        })
        .then(async (res) => {
            const data = await res.json();
            
            if (res.ok) {
                Swal.fire('Success!', data.message, 'success').then(() => {
                    window.location.reload();
                });
            } else {
                // Show validation error(s)
                let msg = data.message || 'Validation failed.';
                if (data.errors) {
                    msg = Object.values(data.errors).flat().join('<br>');
                }
                Swal.fire('Validation Error', msg, 'error');
            }
        })

        .catch(err => {
            console.error(err);
            Swal.fire('Error!', 'Something went wrong.', 'error');
        });
    });
</script>

@endsection